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

10-1编程挑战切换选项卡这一段没整明白，从第一个for循环开始就看不懂了，请大神帮忙指点一下

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 = "";

}

};

}

小虾学前端

2016-12-19

源自：JavaScript进阶篇 10-1

关注问题我要回答

494

操作

收起

1 回答

云彩无色3804005 回答被采纳 +3 积分
2016-12-19

for(var i=0;i<li.length;i++){//获取所有i编号的元素

li[i].index = i; //定义一个index属性对li进行编号防止闭包函数中无法正常获取当前索引i，而衍生出的一个绑定在dom元素上的数据index

li[i].onclick = function(){//再注册一个点击事件，当点击的时候所有标签都恢复最初状态

for(var n=0;n<li.length;n++){//这步是相对于未被点击部分的样式

li[n].className = "";

div[n].className = "hide";// div所有的div隐藏

}

this.className = "on";//再对点击事件添加相应的属性

div[this.index].className = "";//通过之前的index编号绑定的指定div

}

我也是找别人才理解了，一起学习

2 回复有任何疑惑可以回复我~

收起回答

小虾学前端提问者

非常谢谢，还是有些不太明白，是不是执行 li[n].className = "";这个代码时，li[n]这个元素所有的CSS样式都没有了，还是只是没有onclick的属性，既然(n=0;n<li.length;n++)，n的可能性就是0、1、2有3个可能，为什么li[n]是未被点击的部分，不能是被点击的部分呢