View Code
window.οnlοad=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].οnclick=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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="/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.οnlοad=function()14 {15var oDiv=document.getElementById('div1');16var aBtn=oDiv.getElementsByTagName('input');17var aDiv=oDiv.getElementsByTagName('div');1819for(var i=0;i<aBtn.length;i++)20{21 aBtn[i].index=i22 aBtn[i].οnclick=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 {38new Tab('div1');39 };40 41 function Tab(id)42 {43var _this=this;44var oDiv=document.getElementById(id);4546this.aBtn=oDiv.getElementsByTagName('input');47this.aDiv=oDiv.getElementsByTagName('div');4849for(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 {61for(var i=0;i<this.aBtn.length;i++)62{63 this.aBtn[i].className='';64 this.aDiv[i].style.display='none';65};66oBtn.className='active';67this.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>
