<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>选项卡切换</title> <style type="text/css"> #tab input { background: #999; border: 1px solid #F00; } #tab .active { background: #000; color:#FFF; } #tab div { width:400px; height:300px; display:none; padding: 10px; background: #CCC; border: 1px solid #F00; } </style> </head> <body> <script type="text/javascript"> window.onload = function(){ var tab = new Tab("tab"); } function Tab(id){ var _this = this; var tabBox = document.getElementById(id); this.tabBtn = tabBox.getElementsByTagName('input'); this.tabDiv = tabBox.getElementsByTagName('div'); //console.log(this); for(var i=0;i<this.tabBtn.length;i++){ this.tabBtn[i].index = i; this.tabBtn[i].onclick = function(){ //注意参数this代表的是this.tabBtn[i]，即input按钮 _this.clickBtn(this); }; } }; //将点击的按钮以参数的形式传入 Tab.prototype.clickBtn = function(an){ for(var j=0;j<this.tabBtn.length;j++){ this.tabBtn[j].className=''; this.tabDiv[j].style.display='none'; } an.className='active'; this.tabDiv[an.index].style.display='block'; }; </script> <body> <div id="tab"> <input type="button" value="1" class="active" /> <input type="button" value="2" /> <input type="button" value="3" /> <div style="display:block;">1111111</div> <div>22222222</div> <div>33333333</div> </div> </body> </html>