关于编程挑战(选项卡切换)

来源:10-1 编程挑战

异想天开的懒虫

2016-02-01 16:31

 window.onload = function(){

     var oTab = document.getElementById("tabs");

     var oUl = oTab.getElementsByTagName("ul")[0];

     var oLi = oUl.getElementsByTagName("li");

     var oDiv = oTab.getElementsByTagName("div");

     

     for(var i=0; i<oLi.length;i++){

         oLi[i].index = i;

         oLi[i].onclick = function(){

             for(var n=0;n<oLi.length;n++){

                 oLi[n].className = "";

                 oDiv[n].className = "hide";

             }

             this.className = "on";

             oDiv[this.index].className = "";

         }

     };

}

这一串JS代码中,for语句里面的 oLi[i].index = i;是什么意思?还有第二个for语句的作用是什么?哪个大神能帮帮忙好好解释下整个JS的流程是干嘛的?

写回答 关注

2回答

  • 火星葱
    2016-02-02 16:12:28
    已采纳

    首先呢,oLi[i].index=i是咱们自己给元素定义的一个属性,和id一样,就是个属性;

    其次,第一个for循环意思是给所有的LI元素添加一个onclick()事件,而事件的内容就是等号后面的匿名函数了,而匿名函数中的循环意思是取消LI标签的样式,并且给div标签增加一个hide样式(即隐藏),之后跳出循环,然后给所点击的LI标签增加一个on样式,然后再给DIV标签指定的样式清除

    异想天开的懒...

    oDiv[this.index].className = "";这句里面的this是引用oLi[i]吗?

    2016-02-02 16:24:04

    共 1 条回复 >

  • 火星葱
    2016-02-03 09:31:01

    是的,你也可以理解为当前产生点击事件的元素

JavaScript进阶篇

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

468194 学习 · 21891 问题

查看课程

相似问题