JS实现选项卡效果的代码实例
(编辑:jimmy 日期: 2024/11/3 浏览:3 次 )
选项卡这个效果估计以后的项目会经常涉及到,对代码还是半熟练的情况下还是写下来吧。
先来布局一个简单的页面:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #box{margin: 50px;} #box li{width: 100px;height: 40px;line-height: 40px;text-align: center;background-color: #d8d8d8;margin-right: 2px;float: left;} #box .active{background: red;} #content{clear: both;} #content div{width: 404px;height: 200px;border: 1px solid #d8d8d8;display: none;} </style> </head> <body> <div id="box"> <!--这个ul为选项卡的菜单,提供选择项,并且设置其中一个li为默认样式--> <ul> <li class="active">新闻</li> <li>社会</li> <li>科技</li> <li>娱乐</li> </ul> <!--这个div为选项卡的内容,显示不同菜单的不同内容,并且设置其中一个div为可见,其他隐藏--> <div id="content"> <div style="display: block;">新闻</div> <div>社会</div> <div>科技</div> <div>娱乐</div> </div> </div> </body> </html>
选项卡的制作原理是:有若干的选项和对应数量的内容,当对其中一个选项进行操作时,显示对应内容,其他内容不显示。所以,在页面布局的时候,我们先给一个选项设置特殊样式和显示其对应的内容,其他选项样式不变,对应内容隐藏。当操作选项时,把选项的类名改为特殊样式的类名,并且显示对应内容。
<script type="text/javascript"> window.onload=function(){ var oBox=document.getElementById('box'); var aLi=oBox.getElementsByTagName('li'); var oCon=document.getElementById('content'); var aDiv=oCon.getElementsByTagName('div'); for(var i=0;i<aLi.length;i++){ aLi[i].index=i; //为每个li添加对应的索引index aLi[i].onclick=function(){ //循环为每个li添加onclick事件 for(var i=0;i<aLi.length;i++){ aLi[i].className=''; //循环清空li样式 aDiv[i].style.display='none'; //循环隐藏所有div } this.className='active'; //当前点击的元素样式变成active aDiv[this.index].style.display='block'; //this.index 获取当前li对应的索引 } } } </script>
今天在做选项卡效果时遇到了一个非常低级的错误,但却迟迟找不到原因,如下:
这个是我布局的选项卡的菜单,看起来很简单,一个ul包着3个li,其中一个是 |,所以可以点击的菜单项只有两项,没毛病。
<ul id="text"> <li class="active"><a href="javascript:" rel="external nofollow" rel="external nofollow" >必备软件</a></li> <li id="shu">|</li> <li><a href="javascript:" rel="external nofollow" rel="external nofollow" >常用软件</a></li> </ul>
内容就不看了,接下来我就开始写JS的代码,getElementById什么的巴拉巴拉开始写,写完for循环觉得写完了,然后就运行。。。默认页正常,点击,,空白。?????怎么回事?F12,aLink[i] is undefind;加了一个console.log,检测获取的aLi,aLink,有值,能获取,没错。然后下面循环检测aLink[i],未定义,这是什么情况?在JS代码搞了将近一个小时,换获取方法,换变量名….各种方法,没效果。万万没想到的是,重新检测aLi的时候,发现长度为3。。顿时懵逼,aLink的长度为2,所以肯定有一个找不到。赶紧把第二个li改成span,成功。万恶的 ||||||||。只能说自己的知识还不够,还要继续努力!!!
var oBox=document.getElementById('box'); var oNav=document.getElementById('nav'); var aLi=oNav.getElementsByTagName('li'); var oCon=document.getElementById('con'); var aLink=oBox.getElementsByClassName('hide'); for(var i=0;i<aLi.length;i++){ aLi[i].index=i; //为每个li添加对应的索引index aLi[i].onclick=function(){ //循环为每个li添加onclick事件 for(var i=0;i<aLi.length;i++){ aLi[i].className=''; //循环清空li样式 aLink[i].style.display='none'; //循环隐藏所有div } this.className='active'; //当前点击的元素样式变成active aLink[this.index].style.display='block'; //this.index 获取当前li对应的索引 } }
以上所述是小编给大家介绍的JS选项卡效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:微信打开网址添加在浏览器中打开提示的办法