<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选项卡</title> <style type="text/css"> #div1 input{background: #ffffff;} #div1 input.active{background: yellow;} #div1 div{width: 200px; height: 200px; background: red; display: none;} </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); var aBtn = oDiv.getElementsByTagName('input'); var aDiv = oDiv.getElementsByTagName('div'); for(var i=0;i<aBtn.length;i++) { aBtn[i].index = i; aBtn[i].onclick = function(){ for(var j=0;j<aBtn.length;j++) { aBtn[j].className = ''; aDiv[j].style.display = 'none'; } this.className = 'active'; aDiv[this.index].style.display = 'block'; }; } }; </script> </head> <body> <div id="div1"> <input type="button" class="active" value="a"/><input type="button" value="b"/><input type="button" value="c"/> <div style="display: block;">1111111</div> <div>2222222</div> <div>3333333</div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象选项卡</title> <style type="text/css"> #div1 input{background: #ffffff;} #div1 input.active{background: yellow;} #div1 div{width: 200px; height: 200px; background: red; display: none;} </style> <script type="text/javascript"> //window.onload变成构造函数，变量变成属性，函数变成方法 function TabSwitch(id) { var _this = this;//_this指的是类TabSwitch实例化的对象 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.fnClick(this);//this指的是aBtn[i]， }; } } TabSwitch.prototype.fnClick = function(oBtn) { for(var j=0;j<this.aBtn.length;j++) { this.aBtn[j].className = ''; this.aDiv[j].style.display = 'none'; } //this.className = 'active'; this.aDiv[oBtn.index].style.display = 'block'; this.className = 'active'; } window.onload = function() { var oTabSwitch = new TabSwitch('div1'); }; </script> </head> <body> <div id="div1"> <input type="button" class="active" value="a"/><input type="button" value="b"/><input type="button" value="c"/> <div style="display: block;">1111111</div> <div>2222222</div> <div>3333333</div> </div> </body> </html>