关于className属性.怎么删除先前加上的class类名

怎么让这个脚本,当点击导航的连接时,怎么把先前加上的class="displayElem"删掉啊?否则它会把.displayElem和.nodeElem一起加上去.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;}
#menu{
margin:35px auto;
width:860px;
border:1px solid #ccc;
}
#tabMenu{
height:35px;
background:#316BC1;
}
#tabMenu li{
float:left;
height:35px;
width:143px;
background:#316BC1;
text-align:center;
color:#fff;
line-height:35px;
}
#tabMenu li a{
text-decoration:none;
color:#fff;
}
#tabContent{
width:860px;
text-align:center;
}
.hidden{
display:none;
}
.displayElem{
display:block;
}
.noneElem{
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
function tabChange(num){
var tabMenu = document.getElementById("tabMenu").getElementsByTagName("li");
for(var i=0; i<tabMenu.length; i++){
if(i == num){
document.getElementById("con_"+i).className += " displayElem";
}
else{
document.getElementById("con_"+i).className += " noneElem";
}
}
}
</script>
<div id="menu">
<div id="tabMenu">
<ul>
<li><a href="#" onclick="tabChange(0)">新闻</a></li>
<li><a href="#" onclick="tabChange(1)">游戏</a></li>
<li><a href="#" onclick="tabChange(2)">音乐</a></li>
<li><a href="#" onclick="tabChange(3)">产品</a></li>
<li><a href="#" onclick="tabChange(4)">聊天</a></li>
<li><a href="#" onclick="tabChange(5)">论坛</a></li>
</ul>
</div>
<div id="tabContent">
<ul class="hidden" id="con_0">
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
<ul class="hidden" id="con_1">
<li><a href="#">12222222222221</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
<ul class="hidden" id="con_2">
<li><a href="#">1111333333333331</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
<ul class="hidden" id="con_3">
<li><a href="#">14444444444444111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
<ul class="hidden" id="con_4">
<li><a href="#">1155555555555555111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
<ul class="hidden" id="con_5">
<li><a href="#">666666666666666</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
<li><a href="#">1111111111111111</a></li>
</ul>
</div>
</div>
</body>
</html>

解决方案 »

  1.   


    <script type="text/javascript">
    function tabChange(num){
    var tabMenu = document.getElementById("tabMenu").getElementsByTagName("li");
    for(var i=0; i<tabMenu.length; i++){
    document.getElementById("con_"+i).className=document.getElementById("con_"+i).className.replace(/displayElem/g,'').replace(/noneElem/g,'').replace(/(^\s*)|(\s*$)/g,'');
    if(i == num){
    document.getElementById("con_"+i).className += " displayElem";
    }
    else{
    document.getElementById("con_"+i).className += " noneElem";
    }
    }
    }
    </script>
      

  2.   


    function tabChange(num){
                    var tabMenu = document.getElementById("tabMenu").getElementsByTagName("li");
                    for(var i=0; i<tabMenu.length; i++){
                        if(i == num){
                            document.getElementById("con_"+i).className = "displayElem";
                        }
                        else{
                            document.getElementById("con_"+i).className = "hidden noneElem";
                        }
                    }
                }
      

  3.   

     <script type="text/javascript">
                function tabChange(num){
                    var tabMenu = document.getElementById("tabMenu").getElementsByTagName("li");
                    document.getElementById("con_"+i).className="";
                    for(var i=0; i<tabMenu.length; i++){
                        if(i == num){
                            document.getElementById("con_"+i).className += " displayElem";
                        }
                        else{
                            document.getElementById("con_"+i).className += " noneElem";
                        }
                    }
                }
            </script>