                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

我想问下，第二个循环把每个li的样式设为空，每个div设为hide，那么后面把当前li样式设为on,其他li的样式呢？刚刚不是全设空了么，还是说这个 className = “” 对默认的样式无效？

window.onload = function(){

var oTab = document.getElementById("tabs");

var oUl = oTab.getElementsByTagName("ul")[0];

var oLis = oUl.getElementsByTagName("li");

var oDivs= oTab.getElementsByTagName("div");

for(var i= 0,len = oLis.length;i<len;i++){

oLis[i].index = i;

oLis[i].onclick = function() {

for(var n= 0;n<len;n++){

oLis[n].className = "";

oDivs[n].className = "hide";

}

this.className = "on";

oDivs[this.index].className = "";

}

</script>

溯梦随风

2016-07-23

源自：JavaScript进阶篇 10-1

关注问题我要回答

1063

操作

收起

4 回答

qq_二冬_0 回答被采纳 +3 积分
2016-07-26

#tabs ul li{
      background:#fff;
      cursor:pointer;
      float:left;
      list-style:none;
      height:28px;
      line-height:28px;
      margin:0px 3px;
      border:1px solid #aaaaaa;
      border-bottom:none;
      display:inline-block;
      width:60px;
      text-align: center;
    }
    #tabs ul li.on{
      border-top:2px solid saddlebrown;
      border-bottom: 2px solid #fff;
    }

在原CSS里是对li标签设置了两次样式，第一次设置的是基本样式，这也就是你说的在class属性为空的时候为什么出现样式的原因。第二次是对class属性值为“on”的li标签设置了样式，这也就是实现切换的关键，在你点击了li标签后，他会先清除所有的li的class属性值，在为你点击的这个li标签设置一个class=on，这样就造成了只有你点击的里标签会有第二个样式。

你也可以这么理解，每一个li标签比喻成一个门，

1、先把所有门涂成红色（#tabs ul li{样式一}）；

2、为打开的门贴一个贴纸（#tabs ul li.on{样式二}）；，但是你并不知道那个门是开的。

3、这个时候，你要去检查有没有门开了（遍历li标签），先把所有门上的贴纸都拿下来（可能有也可能没有）（oLis[n].className = ""; ）然后如果你如果发现有门打开了（onclick）了，就可以对他贴一个贴纸（应用样式2了。）