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

来源:10-1 编程挑战

小虾学前端

2016-12-19 16:53

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

                 }

             };

         }


写回答 关注

1回答

  • 云彩无色3804005
    2016-12-19 22:35:01
    已采纳

    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

                }

            }

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

    小虾学前端 回复云彩无色38...

    恩恩,谢谢!

    2016-12-26 10:01:47

    共 3 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

469343 学习 · 22585 问题

查看课程

相似问题