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

大神们，请从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 = "";

}

};

}

</script>

慕粉3598977

2016-11-05

源自：JavaScript进阶篇 10-1

关注问题我要回答

646

操作

收起

2 回答

顾非白
2016-11-07

希望有所帮助

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

收起回答

qq_谜离_03319966

这里的this可以换成oLis[i]吗为什么

2016-11-16 回复有任何疑惑可以回复我~

stone310
2016-11-05

for(var i= 0,len = oLis.length;i<len;i++){  //for遍历oLis
                 oLis[i].index = i;          //保存每一个i值到对应的每一个oLis上
                 oLis[i].onclick = function() { //点击
                     for(var n= 0;n<len;n++){    //再次对oLis遍历
                         oLis[n].className = "";  //所有oLis的class为空
                         oDivs[n].className = "hide";  //所有oDiv的class为hide
                     }
                     this.className = "on";      //当前点击的oLis 的class为on
                     oDivs[this.index].className = "";  //当前点击的oLis的i值所对应的oDivs的class为空
                 }
             };
         }

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

收起回答

qq_谜离_03319966

这里的this可以换成oLis[i]吗为什么

2016-11-16 回复有任何疑惑可以回复我~

stone310 回复 qq_谜离_03319966

不可以，因为i已经是个定值，相当于oLis.length

2016-11-16 回复有任何疑惑可以回复我~