JavaScript实现tab选项卡（多种方式）

<div id="content">
<div id="tag">
<input class="active" type="button" value="a" />
<input type="button" value="b"  />
<input type="button" value="c"  />
</div>
<div id="zoom">
<div style="display:block;">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</div>

<style type="text/css">
#content input{ background:white;}
#content .active{ background:yellow;}
#content{
height:223px;
width:202px;
border:1px solid green;

}
#zoom{
height:200px;
width:200px;
border:1px solid red;
overflow:hidden;

}
#content #zoom div{
width:200px;
height:200px;
background:#ccc;
display:none;
}
</style>

function show(){
var btns=document.getElementById("tag").getElementsByTagName("input");
var divs=document.getElementById("zoom").getElementsByTagName("div");
var btnslen=btns.length;
var divslen=divs.length;
for(var i=0;i<btnslen;i++){  //先循环俺就
btns[i].index=i; //添加属性表示当前操作的索引滴呀
btns[i].onclick=function (){
//先清除原有的样式
for(var j=0;j<divslen;j++){  //再循环我们的div
btns[j].className='';
divs[j].style.display='none';
}
this.className='active';
divs[this.index].style.display='block';
}
}
}
window.onload=function (){
show();
}

<div id="content">
<div id="tag">
<input class="active" type="button" value="a" />
<input type="button" value="b"  />
<input type="button" value="c"  />
</div>
<div id="zoom">
<div  style="display:block; z-index:100;">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</div>

#content input{ background:white;}
#content .active{ background:yellow;}
#content{
height:223px;
width:202px;
border:1px solid green;
position:relative;
}
#zoom{
height:200px;
width:200px;
border:1px solid red;

}
#content #zoom div{
width:200px;
height:200px;
background:#ccc;
position:absolute;

}

//前提，不能设置display:none;
function showByZIndex(){
//通过z-index 的方法来实现当前属性的设置滴
var btns=document.getElementById("tag").getElementsByTagName("input");
var divs=document.getElementById("zoom").getElementsByTagName("div");
var btnsLen=btns.length;
var divsLen=divs.length;
for(var i=0;i<btnsLen;i++){
btns[i].index=i;
btns[i].onclick=function(){
for(var j=divsLen-1;j>=0;j--){
//清除所有的buts的样式滴啊
btns[j].className='';
//初始化div的z-index熟悉滴呀
divs[j].style.zIndex=j;
}
this.className='active';
divs[this.index].style.zIndex=99; //这是为最大滴呀

}
}
}
window.onload=function (){
showByZIndex();
}

//其实这样写，不够完美，后期“功力增加”了，我再来进行优化滴哎呀
function oopStyle(id){
//面向对象的方式来思考问题呀
//面向对象就不能再这么写了滴呀,因为你我们要面向content这个对对象滴呀； 这个对象里面包含了tag 和 zoom
// var btns=document.getElementById("tag").getElementsByTagName("input");
// var divs=document.getElementById("zoom").getElementsByTagName("div");
var _this=this;//当前对象，new出来的对象
this.btns=document.getElementById(id).getElementsByTagName("div")[0].getElementsByTagName("input");
this.divs=document.getElementById(id).getElementsByTagName("div")[1].getElementsByTagName("div");
for(var i=0;i<this.btns.length;i++){
this.btns[i].index=i;
this.btns[i].onclick=function (){
var xx=this; //这个this 是当前的按钮；
_this.fn(this);
//调用当前对象的方法，传递点击的这对象戏呀
//当前对象包含两个属性滴呀（btns,divs）
}
}
}
oopStyle.prototype.fn=function(obj){
//这个就不是单指某个div对象，或者btn对象了，是new出来的对象
//div btn 只能说是他的属性蜡
//这的this 指的是new 出来的对象的呀
for(var j=0;j<this.btns.length;j++){
this.btns[j].className='';
this.divs[j].style.display='none';
}
obj.className='active';
this.divs[obj.index].style.display='block';
}
window.onload=function (){
new oopStyle("content");
}