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

这里有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 = "";    

                 }

             };

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中的控制 就实现了选显卡切换.