关于js控制li标签里class的问题

<ul class="tab_title clearfix">
<li class="current2" name="__tab_detail_pub"  >
 <span id="tab_detail" onclick="showDetail()">商品详情</span>
</li>
<li name="__tab_comment_pub"  >
<a href="#" id="tab_comm" onclick="showPinglun()">商品评论</a>
</li>
</ul>
上述是页面代码，下面是目前的js代码，
function showPinglun(){
document.getElementById("pinglun").style.display="";
document.getElementById("tb_detail").style.display="none";
}
function showDetail(){
document.getElementById("pinglun").style.display="none";
document.getElementById("tb_detail").style.display="";
}
我想在点击商品评论也就是调用function showPinglun()时，将“商品详情”li标签里的class="current2"的class值设为空，而将“商品评论”里li标签的class值设为class="current2"。我再点击function showDetail()时，将“商品评论”li标签里的class值设为空，而将“商品详情”里li标签的class值设为class="current2"。~~万分感谢~~！！

解决方案 »

  1.   

    <ul class="tab_title clearfix">
    <li class="current2" name="__tab_detail_pub" id="spxqli" >
    <span id="tab_detail" onclick="showDetail(this)">商品详情</span>
    </li>
    <li name="__tab_comment_pub" id="spplli">
    <a href="#" id="tab_comm" onclick="showPinglun()">商品评论</a>
    </li>
    </ul>
    <script>
    function showPinglun(obj){
    document.getElementById("pinglun").style.display="";
    document.getElementById("tb_detail").style.display="none";
    document.getElementById("spxqli").className = "";
    }
    function showDetail(){
    document.getElementById("pinglun").style.display="none";
    document.getElementById("tb_detail").style.display="";
    document.getElementById("spplli").className = "";
    document.getElementById("spxqli").className = "current2";
    }
    </script>
      

  2.   

    如果是jquery会很好实现function showPinglun(){
    document.getElementById("pinglun").style.display="";
    document.getElementById("tb_detail").style.display="none";
    $("#tb_detail").parent().removeClass("current2");
    $("#pinglun").parent().addClass("current2");
    }
    function showDetail(){
    document.getElementById("pinglun").style.display="none";
    document.getElementById("tb_detail").style.display="";
    $("#pinglun").parent().removeClass("current2");
    $("#tb_detail").parent().addClass("current2");
    }
      

  3.   

    "#tb_detail"这地方是什么意思？它是什么属性？？
      

  4.   

    但是写在页面里不知道为什么没有作用~~>.<~~
      

  5.   

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test</title>
    </head>
    <body>
    <ul class="tab_title clearfix">
    <li class="current2" name="__tab_detail_pub" >
    <span id="tab_detail">商品详情</span>
    </li>
    <li name="__tab_comment_pub" >
    <a href="#" id="tab_comm">商品评论</a>
    </li>
    </ul>
    <script type="text/javascript">
    function addClass(elem, className){
    if(!elem.className){
    elem.className = className;
    return;
    }
    var clazz = ' ' + elem.className + ' ';
    if(clazz.indexOf(' ' + className + ' ') === -1){
    elem.className = elem.className + ' ' + className;
    }
    }
    function removeClass(elem, className){
    if(!elem.className){
    return;
    }else if(elem.className === className){
    elem.removeAttribute('class');
    }else{
    var clazz = ' ' + elem.className + ' ',
    reg = new RegExp('\\s' + className + '\\s');
    clazz = clazz.replace(reg, ' ');
    elem.className = clazz.replace(/^\s+|\s+$/g, "");
    }
    }
    var detail = document.getElementById('tab_detail'),
    comm = document.getElementById('tab_comm');
    comm.onclick = function(){
    addClass(this.parentNode, 'current2');
    removeClass(detail.parentNode, 'current2');
    }
    detail.onclick = function(){
    addClass(this.parentNode, 'current2');
    removeClass(comm.parentNode, 'current2');
    }
    </script>
    </body>
    </html>
      

  6.   

    这JQ写得夹生了，一遭改了，楼主也得看出比对来：
    function showPinglun(){
    $("#tb_detail").hide().parent().removeClass("current2");
    $("#pinglun").show().parent().addClass("current2");
    }
    function showDetail(){
    $("#pinglun").hide().parent().removeClass("current2");
    $("#tb_detail").show().parent().addClass("current2");
    }要能使用，需在<head></head>中先引用JQ：
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>