1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab-oop</title> 6 </head> 7 <style> 8 #div1 div{ 9 width: 200px; 10 height: 200px; 11 border: 1px solid red; 12 background-color: #ccc; 13 display: none; 14 } 15 button{ 16 background: white; 17 } 18 #div1 button.active{ 19 background: yellow; 20 } 21 </style> 22 <body> 23 24 <div id="div1"> 25 <button class="active">aaa</button> 26 <button>bbb</button> 27 <button>ccc</button> 28 <div style="display: block;">aaa</div> 29 <div>bbb</div> 30 <div>ccc</div> 31 </div> 32 33 </body> 34 <script> 35 window.onload=function(){ 36 new TabSwitch('div1'); 37 } 38 function TabSwitch(id){ 39 var _this=this; 40 var oDiv=document.getElementById(id); 41 this.aBtn=document.getElementsByTagName('button'); 42 this.aDiv=oDiv.getElementsByTagName('div'); 43 for(var i=0;i<this.aBtn.length;i++){ 44 this.aBtn[i].index=i; 45 this.aBtn[i].onclick=function(){ 46 _this.fnClick(this); 47 } 48 } 49 } 50 51 TabSwitch.prototype.fnClick=function(oBtn){ 52 for(var i=0;i<this.aBtn.length;i++){ 53 this.aBtn[i].className=''; 54 this.aDiv[i].style.display='none'; 55 } 56 oBtn.className='active'; 57 this.aDiv[oBtn.index].style.display='block'; 58 } 59 </script> 60 </html>