JS实现选项卡效果的代码实例
更新时间：2019年05月20日 11:12:38 作者：liujian_laohan
这篇文章主要介绍了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选项卡效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了JS实现HTML表格排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
我们在开发过程中,特别是数据库系统的开发中经常会遇到多条件的查询状况这篇文章主要给大家介绍了关于前端实现列表多条件查询/搜索功能的两种实现方法,需要的朋友可以参考下2024-08-08
这篇文章主要为大家详细介绍了微信小程序实现验证码获取倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
探讨：JavaScript ECAMScript5 新特性之get/set访问器
这篇文章主要介绍了探讨：JavaScript ECAMScript5 新特性之get/set访问器 的相关资料,需要的朋友可以参考下2016-05-05
下面小编就为大家带来一篇真正好用的js验证上传文件大小的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要为大家详细介绍了微信小程序实现通讯录列表展开收起，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家详细介绍了微信小程序使用canvas绘制钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）
这篇文章主要为大家详细介绍了bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs等相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最近发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug。所以这篇文章主要给大家介绍了关于js中this的指向问题的相关资料，需要的朋友可以参考下2018-11-11
可能很多人在学习 JavaScript 过程中碰到过函数参数传递方式的迷惑，本着深入的精神，我给大家分享了一篇教程关于javascript中的函数调用知识，感兴趣的朋友一起学习吧2017-03-03
最新评论