1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选项卡-面向对象</title> 6 <style type="text/css"> 7 #div input{ 8 background:#ccc; 9 outline: none; 10 cursor: pointer; 11 } 12 #div .active{ 13 background:yellow; 14 } 15 #div div{ 16 200px; 17 height:200px; 18 background:#ccc; 19 display: none; 20 } 21 </style> 22 <script type="text/javascript"> 23 window.onload=function(){ 24 var oTab=new TabSwitch('div'); 25 }; 26 function TabSwitch(id){ 27 var oDiv=document.getElementById(id); 28 this.aBtn=oDiv.getElementsByTagName('input'); 29 this.aDiv=oDiv.getElementsByTagName('div'); 30 var i=0; 31 var _this=this; 32 for(i=0;i<this.aBtn.length;i++){ 33 this.aBtn[i].index=i; 34 this.aBtn[i].onclick=function(){ 35 _this.tab(this); 36 }; 37 } 38 }; 39 TabSwitch.prototype.tab=function(oBtn){ 40 for(i=0;i<this.aBtn.length;i++){ 41 this.aBtn[i].className=""; 42 this.aDiv[i].style.display='none'; 43 }; 44 oBtn.className='active'; 45 this.aDiv[oBtn.index].style.display='block'; 46 }; 47 </script> 48 </head> 49 <body> 50 <div id="div"> 51 <input class="active" type="button" value="教育"> 52 <input type="button" value="财经"> 53 <input type="button" value="娱乐"> 54 <div style="display: block">我是教育</div> 55 <div>我是财经</div> 56 <div>我是娱乐</div> 57 </div> 58 </body> 59 </html>
主要难点在于对this的理解和使用