JS实现选项卡效果的代码实例
程序员文章站
2023-11-25 22:29:46
选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。
先来布局一个简单的页面：
&l...
选项卡这个效果估计以后的项目会经常涉及到，对代码还是半熟练的情况下还是写下来吧。
先来布局一个简单的页面：
<!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选项卡效果详解整合，希望对大家有所帮助