<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1 div{ 200px;height: 200px; border:1px solid #999; display: none; } .active{ background:red; } </style> </head> <body> <div id="div1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display: block;">111111111111</div> <div >222222222222</div> <div >333333333333</div> </div> <script> window.onload = function(){ var t1 = new Tab(); t1.init(); } // 全局变量就是属性 function Tab(){ this.oParent = document.getElementById("div1"); this.aInput = this.oParent.getElementsByTagName("input"); this.aDiv = this.oParent.getElementsByTagName("div"); } // 函数就是方法 Tab.prototype.init = function(){ var This = this; console.log(111,this) for(var i=0 ; i < this.aInput.length; i++){ this.aInput[i].index = i; this.aInput[i].onclick = function(){ console.log(222,this) // This.change(this); for(var i=0 ; i < This.aInput.length; i++){ This.aInput[i].className = ""; This.aDiv[i].style.display = "none"; } this.className = "active"; This.aDiv[this.index].style.display = "block"; } } } </script> </body> </html>