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

js编程挑战，选项卡切换效果。

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的不同]

赫昂山

2016-07-20

源自：JavaScript进阶篇 10-1

关注问题我要回答

1493

操作

收起

2 回答

rookie_r
2016-07-20

这里是将当前的i保存到每个对象的index属性中，目的就是在onclick事件中，点击每个选项卡获取当前这个选项卡所对应内容的索引。i就是当前选项卡所对应的内容的索引。

这个for循环在文档加载完成时就已经开始执行，并且执行完了，所以，这个i最后是3，所以oDivs[i]中的这个i=3,oDivs中根本就没有索引为3的元素，所以会报undefined错误，要想获取当前选项卡的索引，就需要将当前的i保存到没有oLis对象里面，如代码：oLis[i].index = i;