点击li标签变色，求Js代码

本帖最后由 zhaofeng0420 于 2013-12-27 18:16:46 编辑

解决方案 »

  1.   

    document.getElementById("mu").onclick = function(e){
    e = e || window.event;
    var target = e.srcElement || e.target,
        tagName = target.tagName.toLowerCase(),
    allLi = document.getElementById("mu").getElementsByTagName("li");

    for(var i=0,len=allLi.length;i<len;i++){
    if(target == allLi[i]){
    allLi[i].style.background = "red";
    }else{
    allLi[i].style.background = "blue";
    }
    }

    };把这段，写在页面的最下面
      

  2.   

    谢谢，您的这段代码很好用，但我改了一下之后，li:hover就失效了，不知道什么原因？
    document.getElementById("mu").onclick = function(e){
                e = e || window.event;
                var target = e.srcElement || e.target,
                    tagName = target.tagName.toLowerCase(),
                    allLi = document.getElementById("mu").getElementsByTagName("li");
                 
                for(var i=0,len=allLi.length;i<len;i++){
                    if(target == allLi[i]){
                        allLi[i].style.background = "#FFA11F";
    allLi[i].style.color = "#0978D1";
                    }else{
                        allLi[i].style.background = "#0978D1";
    allLi[i].style.color = "#FFF";
                    }
                }
                 
            };
      

  3.   

    <style>
    .liSelected{
    background-color:#FFA11F;
    color:#0978D1;
    }
    .liNoSelected{
    background-color:#0978D1;
    color:#FFF;
    }
    .mu li:hover{
    color:#0978D1;
    }
    </style>
    <script>
    document.getElementById("mu").onclick = function(e){
                e = e || window.event;
                var target = e.srcElement || e.target,
                    tagName = target.tagName.toLowerCase(),
                    allLi = document.getElementById("mu").getElementsByTagName("li");
                  
                for(var i=0,len=allLi.length;i<len;i++){
                    if(target == allLi[i]){
                        allLi[i].className = "liSelected";
                    }else{
    allLi[i].className = "liNoSelected";
                    }
                }
                  
            };
    </script>因为上面的那种写法，样式会直接被写在标签内，这样的样式有最高的优先级，所以你在css文件中，添加的hover对应的class，是会被标签内的样式覆盖，把你要的样式都写成class，添加class就没有问题了。这样li你最好都只用一个class，用多个的话，就得做其他处理了。
      

  4.   

    现在比刚才好一点了，还有一点问题，就是点击前hover是OK的，点击后就失效了
      

  5.   

    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7" />
        <title>关于本站|联系我们</title>
        <style type="text/css">
            .mu .liSelected{background-color:#FFA11F;color:#0978D1}
            .mu li{background-color:#0978D1;color:#FFF}
            .mu li:hover{color:red}
        </style>
    </head>
    <body>
    <div class="wrap">
        <div class="main">
            <div class="logo aLogo"><a class="logo_a" title="设为首页"></a></div>
            <div class="bdn">当前位置：
                <a href="./">首页</a> >> 关于本站
            </div>
            <div class="lmu">
                <div class="idt">关于本站</div>
                <div class="mu" id="mu">
                    <ul>
                        <li>关于本站</li>
                        <li>诚聘英才</li>
                        <li>联系我们</li>
                        <li>使用声明</li>
                    </ul>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var mu = document.getElementById("mu");
            var li = mu.getElementsByTagName("li");
            mu.onclick = function(e){
                e = e || window.event;
                var target = e.srcElement || e.target;
                for(var i=0,len=li.length;i<len;i++){
                    li[i].className = target == li[i] ? "liSelected":"";
                }
            };
        </script>
    </div>
    </body>
    </html>