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

怎么实现选项卡切换的

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

                 }

             };

         }

for循环这段不懂,到底是怎么实现选项卡切换的,怎么找到与之对应的选项卡并显现出来

正在回答

3 回答

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

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

这里有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 回复 有任何疑惑可以回复我~

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 回复 有任何疑惑可以回复我~

举报

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

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

进入课程

怎么实现选项卡切换的

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