JS实现选项卡效果的代码实例
选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。
先来布局一个简单的页面：
<!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选项卡效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文主要介绍了JavaScript函数参数的传递方式，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
javascript-表格排序(降序/反序)实现介绍(附图)
使用了Array方法、sort:降序、reverse:反序完成了基本功能，对于联合排序没有实现，感兴趣的朋友可以参考下哈2013-05-05
本文给大家分享日常中比较熟悉的常用的几个算法用JS的实现，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-11-11
这篇文章主要为大家详细介绍了微信小程序轮播图自定义光标位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了js实现四舍五入完全保留两位小数的方法,涉及javascript针对浮点数的数值运算相关技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JavaScript图片旋转效果实现方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
js中scrollTop()方法和scroll()方法用法示例
这篇文章主要介绍了js中scrollTop()方法和scroll()方法用法,结合实例形式分析了scrollTop()方法和scroll()方法滚动操作的用法与相关操作技巧,需要的朋友可以参考下2016-10-10
问题产生需求：做OA时弄到 备忘这个功能，想以日历的形式展现2012-01-01
作为前端开发,JS是重中之重,下面这篇文章主要给大家介绍了关于JavaScript常见手写题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
本文主要介绍了ES6中Math对象的部分扩展，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论