javascript实现tab选项卡过程分解详解
tab选项卡是最为常见的功能模块之一，所以掌握它的制作技巧是非常有必要的。
下面就对一个简单的代码实例进行详细的分解，介绍一下它的实现过程。
当然此选项卡比较简单，外表也不美观，实际应用的话还需要更好的修改和美化，不过咱们这里只是介绍一下它的实现过程。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.active{
background: #9CC;
}
.content{
width:500px;
height:200px;
border:1px #666666 solid;
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById('box');
var btn=odiv.getElementsByTagName('input');
var contents=odiv.getElementsByTagName('div') ;
for(var index=0;index<btn.length;index++){
btn[index].index=index;
btn[index].onclick=function(){
for(var y=0;y<btn.length;y++){
btn[y].className='';
contents[y].style.display='none';
}
this.className='active';
contents[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="box">
<input type="button" class="active" value="选项卡一"/>
<input type="button" value="选项卡二"/>
<input type="button" value="选项卡三"/>
<input type="button" value="选项卡四"/>
<div class="content" style="display:block;">犀牛前端部落一</div>
<div class="content">犀牛前端部落二</div>
<div class="content">犀牛前端部落三</div>
<div class="content">犀牛前端部落四</div>
</div>
</body>
</html>
上面的代码实现实现了简单的选项卡功能，下面就介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var odiv=document.getElementById('box')，获取id属性值为box的元素对象。
（3）.var btn=odiv.getElementsByTagName('input')，获取odiv对象下的input元素对象集合。
（4）.var contents=odiv.getElementsByTagName('div')，获取odiv对象下的div元素对象集合。
（5）.for(var index=0;index<btn.length;index++)，遍历每一个input元素（也就是按钮）。
（6）.btn[index].index=index，每一个input元素对象添加一个index属性，并赋值为当前的此元素在集合中的索引值。（7）.btn[index].onclick=function(){}，为每一个按钮注册onclick事件处理函数。
（8）.for(var y=0;y<btn.length;y++){
btn[y].className='';
contents[y].style.display='none';
}遍历每一个按钮，然后将按钮的class属性值清空，并且设置作为内容的div隐藏。
（9）.this.className='active',为当前的按钮添加名称为active样式类。
（10）.contents[this.index].style.display='block'，将对应索引的内容div设置为可见状态。
二.相关阅读:
（1）.getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。
（2）.className属性可以参阅javascript className一章节。