View Code
window.onload=function() { new Tab('div1'); }; function Tab(id) { var _this=this; var oDiv=document.getElementById(id); this.aBtn=oDiv.getElementsByTagName('input'); 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.TabDiv(this); }; }; }; Tab.prototype.TabDiv=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'; };
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 #div1 div{width:200px;height:200px;border:solid 1px #000;display:none;} 8 .active{background:yellow;} 9 </style> 10 <script> 11 /*面向过程*/ 12 /* 13 window.onload=function() 14 { 15 var oDiv=document.getElementById('div1'); 16 var aBtn=oDiv.getElementsByTagName('input'); 17 var aDiv=oDiv.getElementsByTagName('div'); 18 19 for(var i=0;i<aBtn.length;i++) 20 { 21 aBtn[i].index=i 22 aBtn[i].onclick=function() 23 { 24 for(var i=0;i<aBtn.length;i++) 25 { 26 aBtn[i].className=''; 27 aDiv[i].style.display='none'; 28 }; 29 this.className='active'; 30 aDiv[this.index].style.display='block'; 31 }; 32 }; 33 }; 34 */ 35 /*面向对象*/ 36 window.onload=function() 37 { 38 new Tab('div1'); 39 }; 40 41 function Tab(id) 42 { 43 var _this=this; 44 var oDiv=document.getElementById(id); 45 46 this.aBtn=oDiv.getElementsByTagName('input'); 47 this.aDiv=oDiv.getElementsByTagName('div'); 48 49 for(var i=0;i<this.aBtn.length;i++) 50 { 51 this.aBtn[i].index=i; 52 this.aBtn[i].onclick=function() 53 { 54 _this.TabDiv(this); 55 }; 56 }; 57 }; 58 59 Tab.prototype.TabDiv=function(oBtn) 60 { 61 for(var i=0;i<this.aBtn.length;i++) 62 { 63 this.aBtn[i].className=''; 64 this.aDiv[i].style.display='none'; 65 }; 66 oBtn.className='active'; 67 this.aDiv[oBtn.index].style.display='block'; 68 }; 69 </script> 70 </head> 71 72 <body> 73 <div id="div1"> 74 <input type="button" value="aaa" class="active" /> 75 <input type="button" value="bbb" /> 76 <input type="button" value="ccc" /> 77 <div style="display:block;">111111111111</div> 78 <div>2222222222222</div> 79 <div>33333333333333</div> 80 </div> 81 </body> 82 </html>