个回答

• losingdreaming

  2016-04-28 11:29:47

  为什么里面还有一个for循环

  0

• 千寻521

  2016-04-21 14:58:30

  这里有3个<li>标签和<div>标签，当点击第一个<li>时，同时第一个<div>得到响应，就需要通过index来完成。

  它帮助获取检索<li>的序号位置，获得的结果再在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++){      //第二个for循环将多余情形进行了屏蔽
  

                           oLis[n].className = "";

                           oDivs[n].className = "hide";

                       }

                       this.className = "on";                    //这里再将要显示的内容，情形设置提取出来
  

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

                   }

               };

  
  

  0

• DMSF

  2016-04-20 22:07:45

  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;//这里的index 是oLis[i]的自定义属性，用来保存该元素在原数组中的下标.

                   oLis[i].onclick = function() {//注册一个点击事件，当点击的时候所有标签都恢复最初状态

                       for(var n= 0;n<len;n++){//这步是相对于未被点击部分的样式

                           oLis[n].className = "";//将所有的li的className设置为空

                           oDivs[n].className = "hide";//将所有的div的className设置为隐藏.

                       }

                       this.className = "on";//将当前点击的li的className设置为on

                       oDivs[this.index].className = "";//前边保存了index的值,这里直接用this.index来表示当前是第几个div,并将其className设置为空.

                   }

               };

           }

  这样再加上css中的控制 就实现了选显卡切换.

  0