js面向对象TAB选项卡

　　 
         

　　最初我管它叫滑动门，网上很多都叫tab选项卡效果，那好吧，就叫它选项卡吧。在网上找这个JS代码一搜一大把，之前我也是一直用网上的代码来完成这效果，今天自己动手写了一个面向对象的。是根据自己习惯的布局来写的。不过用起来还是很方便的，每用一个就new一个。

　　首先来看一下html布局。

　　<div id="tab1"> 　　<div class="btn"> 　　<ul> 　　<li class="hover">合作伙伴</li> 　　<li>客服服务</li> 　　<li>友情链接</li> 　　</ul> 　　</div> 　　<div class="tab_con"> 　　<div>第一个内容</div> 　　<div>第二个内容</div> 　　<div>第三个内容</div> 　　</div> 　　</div>

　　JS代码： 　　<script> 　　function Tab(id){//构造函数 　　var oTab=document.getElementById(id); 　　var oTabCon=oTab.getElementsByTagName('div')[1]; 　　this.aBtn=oTab.getElementsByTagName('ul')[0].getElementsByTagName('li'); 　　this.aDiv=oTabCon.getElementsByTagName('div'); 　　var i=0; 　　var _this=this; 　　this.arr=[]; 　　for(i=0;i<this.aDiv.length;i++){ 　　if(this.aDiv[i].parentNode==oTabCon){ 　　this.arr.push(this.aDiv[i]); 　　} 　　} 　　for(i=0;i<this.aBtn.length;i++){ 　　this.aBtn[i].index=i; 　　this.aBtn[i].onmouseover=function(){ 　　_this.tabfn(this); 　　} 　　} 　　} 　　 　　Tab.prototype.tabfn=function(oBtn){ 　　for(i=0;i<this.aBtn.length;i++){ 　　this.aBtn[i].className=''; 　　this.arr[i].style.display='none'; 　　} 　　oBtn.className='hover'; 　　this.arr[oBtn.index].style.display='block'; 　　} 　　//使用： 　　Window.onload=function(){ 　　var tab1=new Tab('tab1'); 　　} 　　</script>