js编程挑战，选项卡切换效果。
来源：10-1 编程挑战
赫昂山
2016-07-20 11:44
window.onload=function(){
var otab=document.getElementById("tabs");
var oli=document.getElementsByTagName("li");
var div=otab.getElementsByTagName("div");
for(var i=0;i<oli.length;i++){
oli[i].index=i;
oli[i].onclick=function(){
for(var j=0;j<oli.length;j++){
oli[j].className="";
div[j].className="hide";
}
this.className="on";
div[this.index].className="";
}
}
}关于这里面的this是代表onload的document，还是循环里的oli啊，然后为什么第一层里面需要使用到this.classname div[this.index].classname啊 主要是不理解第二层和第一层区别的this 和div[里的index和i的不同]
写回答
关注
2回答
-
- rookie_r
- 2016-07-20 13:45:11
这里是将当前的i保存到每个对象的index属性中，目的就是在onclick事件中，点击每个选项卡获取当前这个选项卡所对应内容的索引。i就是当前选项卡所对应的内容的索引。
这个for循环在文档加载完成时就已经开始执行，并且执行完了，所以，这个i最后是3，所以oDivs[i]中的这个i=3,oDivs中根本就没有索引为3的元素，所以会报undefined错误，要想获取当前选项卡的索引，就需要将当前的i保存到没有oLis对象里面，如代码：oLis[i].index = i;
-
- rookie_r
- 2016-07-20 13:27:39
这里面的this代表的是循环里的oli里面的元素，this.classname div[this.index].classname中的this都是当前的oli[i]，是同一个
JavaScript进阶篇
本课程从如何插入JS代码开始，带您进入网页动态交互世界
468060 学习 · 21891 问题
相似问题