OOP学习

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>tab-oop</title>
 </head>
 <style>
     #div1 div{
         width: 200px;
         height: 200px;
         border: 1px solid red;
         background-color: #ccc;
         display: none;
     }
     button{
         background: white;
     }
     #div1 button.active{
         background: yellow;
     }
 </style>
 <body>

         <div id="div1">
             <button class="active">aaa</button>
             <button>bbb</button>
             <button>ccc</button>
             <div style="display: block;">aaa</div>
             <div>bbb</div>
             <div>ccc</div>
         </div>

 </body>
 <script>
     window.onload=function(){
         new TabSwitch('div1');
     }
     function TabSwitch(id){
         var _this=this;
         var oDiv=document.getElementById(id);
         this.aBtn=document.getElementsByTagName('button');
         this.aDiv=oDiv.getElementsByTagName('div');
         for(var i=0;i<this.aBtn.length;i++){
             this.aBtn[i].index=i;
             this.aBtn[i].onclick=function(){
                 _this.fnClick(this);
             }
         }
     }

     TabSwitch.prototype.fnClick=function(oBtn){
         for(var i=0;i<this.aBtn.length;i++){
             this.aBtn[i].className='';
             this.aDiv[i].style.display='none';
         }
         oBtn.className='active';
         this.aDiv[oBtn.index].style.display='block';
     }
 </script>
 </html>