面向对象深入理解3

//table切换实例
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <title></title>
 7      
 8      <style>
 9         *{padding: 0; margin: 0;}
10         li{list-style: none;}
11         #tabCon{width: 1000px; margin:50px auto;}
12         #tabul{width: 1000px; float: left;}
13         #tabul li{float: left; width: 250px; text-align: center; cursor: pointer;}
14         #tabul li.active{color:#f00;background-color: #ccc;}
15         #tabCon .liCOn{width: 1000px; background-color: #ccc; font-size: 25px; height: 400px; float: left; display: none;}
16     </style>
17     
18 </head>
19 <body>
20     <div id="tabCon">
21         <ul id='tabul'>
22              <li class="active">aa</li>
23              <li>bb</li>
24              <li>cc</li>
25              <li>dd</li>
26          </ul> 
27          <div class="liCOn" style="display: block">aaaa</div>
28          <div class="liCOn">bbbb</div>
29          <div class="liCOn">cccc</div>
30          <div class="liCOn">dddd</div>
31     </div>
32      <script type="text/javascript">
33           window.onload=function(){var tabPt=new tabPro('tabCon');};
34 
35           function tabPro(id){ 
36            var Tabcon=document.getElementById(id);
37            this.Tablicon=Tabcon.getElementsByClassName('liCOn');
38            this.Tabli=Tabcon.getElementsByTagName('li');
39            var i=0;
40            var _this=this;
41            console.log(this);
42            for( i=0; i<this.Tabli.length; i++){
43                    this.Tabli[i].index=i;
44                    this.Tabli[i].onclick=function(){
45                   _this.tabContent(this);
46                 }
47              }
48            }
49 
50            tabPro.prototype.tabContent=function(Tabli){
51                          for( i=0; i<this.Tabli.length; i++){
52                                this.Tabli[i].className='';
53                                this.Tablicon[i].style.display='none';
54                          }
55                       Tabli.className='active';
56                       this.Tablicon[Tabli.index].style.display='block';       
57                    }  
58 
59         
60      </script>
61 </body>
62 </html>