<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container { margin: 0 auto; width: 420px; } input { width: 80px; background-color: #ffffff; } input.active { background-color: grey; } .container div { text-align: center; width: 420px; height: 300px; display: none; background-color: rosybrown; } </style> <script type="text/javascript"> window.onload = function(){ var oDivContainer = document.getElementsByClassName('container')[0]; var aDiv = oDivContainer.getElementsByTagName('div'); var aBtn = oDivContainer.getElementsByTagName('input'); 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"; } aBtn[this.index].className = "active"; aDiv[this.index].style.display = "block"; }; } }; </script> </head> <body> <div class="container"> <input type="button" class="active" value="react"/> <input type="button" value="node"/> <input type="button" value="php"/> <input type="button" value="asp"/> <input type="button" value="javascript"/> <div style="display: block">react</div> <div>node</div> <div>php</div> <div>asp</div> <div>javascript</div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .container { margin: 0 auto; width: 420px; } input { width: 80px; background-color: #ffffff; } input.active { background-color: grey; } .container div { text-align: center; width: 420px; height: 300px; display: none; background-color: rosybrown; } </style> <script type="text/javascript"> function TabSwitch(oDiv) { var _this = this; 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.switchGuo(this); //this 代表aBtn[i] _this 代表oDiv }; } } TabSwitch.prototype.switchGuo = function(oBtn){ for(var j=0;j<this.aBtn.length;j++) { this.aBtn[j].className = ''; this.aDiv[j].style.display = 'none'; } this.aBtn[oBtn.index].className = 'active'; this.aDiv[oBtn.index].style.display = 'block'; }; window.onload = function(){ var oDiv = document.getElementsByClassName('container')[0]; var oTabSwitch = new TabSwitch(oDiv); }; </script> </head> <body> <div class="container"> <input type="button" class="active" value="react"/> <input type="button" value="node"/> <input type="button" value="php"/> <input type="button" value="asp"/> <input type="button" value="javascript"/> <div style="display: block">react</div> <div>node</div> <div>php</div> <div>asp</div> <div>javascript</div> </div> </body> </html>