javascript 经典案例 面向对象的选项卡

<style>
#div1 input{ background:white;}
#div1 input.active{ background:yellow;}
#div1 div{ width:200px; height:200px; background:#ccc; display:none;}
</style>

<script>
window.onload=function(){            //  构造函数：window.onload=
new TaWny('div1');               //  创建对象：TaWny('div1')传参
};
function TaWny(id){                  //  构造函数：
var _this = this;                //传参   找到  this
var oDiv=document.getElementById(id);               //接收  TaWny('div1')  函数的参数
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('div');
for(var i=0; i<this.aBtn.length; i++){
this.aBtn[i].index=i;
this.aBtn[i].onmouseover=function(){                 //函数  _this.ofclick(this);
_this.getonmouse(this);                              //传参   找到  this
};                                                    //  面向对象：函数不要嵌套
}
};
TaWny.prototype.getonmouse=function (aBtn){              //  用prototype原型     使函数变成方法
for( var i=0; i<this.aBtn.length; i++){
this.aBtn[i].className='';          //清空
this.aDiv[i].style.display="none";
}
aBtn.className='active';                     //样式
this.aDiv[aBtn.index].style.display='block';
};
</script>
<div id="div1">
<input class="active" type="button" value="选项1" />
<input  type="button" value="选项2" />
<input  type="button" value="选项3" />

<div style="display:block;" >这是容11111111</div>
<div>这是是内容222222</div>
<div>这是是内容3333</div>