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的不同]
这里是将当前的i保存到每个对象的index属性中,目的就是在onclick事件中,点击每个选项卡获取当前这个选项卡所对应内容的索引。i就是当前选项卡所对应的内容的索引。
这个for循环在文档加载完成时就已经开始执行,并且执行完了,所以,这个i最后是3,所以oDivs[i]中的这个i=3,oDivs中根本就没有索引为3的元素,所以会报undefined错误,要想获取当前选项卡的索引,就需要将当前的i保存到没有oLis对象里面,如代码:oLis[i].index = i;
这里面的this代表的是循环里的oli里面的元素,this.classname div[this.index].classname中的this都是当前的oli[i],是同一个