为了账号安全,请及时绑定邮箱和手机立即绑定

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

 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 回答

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

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

3 回复 有任何疑惑可以回复我~
#1

异想天开的懒虫 提问者

oDiv[this.index].className = "";这句里面的this是引用oLi[i]吗?
2016-02-02 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468044    人
  • 解答问题       21891    个

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

进入课程

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信