JavaScript tab选项卡效果
JavaScript tab选项卡效果属于前端实例代码，有关更多实例代码大家可以查看。
选项卡是非常常见的效果之一，能够在尽可能少的空间中显示更多的内容。
下面是一个用JavaScript实现的选项卡代码，并且给出详细的实现过程。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
list-style:none;
margin:0;
padding:0;
overflow:hidden
}
#tab{
width:401px;
border-top:#A8C29F solid 1px;
border-bottom:#A8C29F solid 1px;
margin:50px 200px;
}
.menu{
width:400px;
background:#eee;
height:28px;
border-right:#A8C29F solid 1px;
border-bottom:#A8C29F solid 1px;
}
li{
float:left;
width:99px;
text-align:center;
line-height:28px;
height:28px;
cursor:pointer;
border-left:#A8C29F solid 1px;
color:#666;
font-size:14px;
overflow:hidden
}
.menudiv{
width:399px;
height:300px;
border-left:#A8C29F solid 1px;
border-right:#A8C29F solid 1px;
border-top:0;
background:#fefefe
}
.menudiv div{
padding:15px;
line-height:28px;
}
.off{
background:#E0E2EB;
color:#336699;
font-weight:bold
}
</style>
<script type="text/javascript">
window.onload=function(){
var otab=document.getElementById("tab");
var lis=otab.getElementsByTagName("li");
var omenudiv=document.getElementById("box");
var divs=omenudiv.children;
var lis_len=lis.length;
for(var index=0;index<lis_len;index++){
lis[index]._index=index;
lis[index].onclick=function(){
for(var j=0;j<lis_len;j++){
lis[j].className="";
divs[j].style.display="none";
}
this.className="off";
divs[this._index].style.display="block";
}
}
}
</script>
</head>
<body>
<div id="tab">
<div class="menu">
<ul>
<li class="off">标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
</ul>
</div>
<div class="menudiv" id="box">
<div>
<h4 style="color:red">标签1-内容</h4>
</div>
<div style="display:none;">
<h4 style="color:red">标签2-内容</h4>
</div>
<div style="display:none;">
<h4 style="color:red">标签3-内容</h4>
</div>
<div style="display:none;">
<h4 style="color:red">标签4-内容</h4>
</div>
</div>
</div>
</body>
</html>
上面的代码实现了选项卡功能，下面介绍一下它的实现过程。
一.代码注释：
（1）.window.onload=function(){}，文档内容完全加载完毕再去执行函数中的代码。
（2）.var otab=document.getElementById("tab")，获取id属性值为tab的元素对象。
（3）.var lis=otab.getElementsByTagName("li")，获取otab元素下所有的li元素集合。
（4）.var omenudiv=document.getElementById("box")，获取id属性值为box的元素对象。
（5）.var divs=omenudiv.children，获取omenudiv下的一级子元素集合。
（6）.var lis_len=lis.length，获取li元素的数目。
（7）.for(var index=0;index<lis_len;index++)，遍历每一个li元素。
（8）.lis[index]._index=index，为当前li元素添加一个自定义属性_index，并赋值为index。
（9）.lis[index].onclick=function(){}，为当前li元素注册onclick事件处理函数。
（10）.for(var j=0;j<lis_len;j++){
lis[j].className="";
divs[j].style.display="none";
}
遍历每一个里元素，并将li元素的className属性值设置为空，对应的内容的设置为隐藏状态。
（11）.this.className="off"和divs[this._index].style.display="block"，为当前的li元素添加样式类off，将对应内容显示。
二.相关阅读：
（1）.document.getElementById方法参阅document.getElementById()一章节。
（2）.getElementsByTagName方法参阅JavaScript getElementsByTagName()一章节。
（3）.children参阅JavaScript children一章节。
（4）.className参阅JavaScript className 属性一章节。
JavaScript tab选项卡效果，这样的场景在实际项目中还是用的比较多的，关于JavaScript tab选项卡效果就介绍到这了。