//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>