window.onload = function(){ var tab = new Tab("tabBox"); } /** * 选项卡 * @param {Object} id：选项卡id */ function Tab(id){ var tabBox = document.getElementById(id); this.tabBtn = tabBox.getElementsByTagName('input'); this.tabDiv = tabBox.getElementsByTagName('div'); for(var i=0;i<this.tabBtn.length;i++){ this.tabBtn[i].index = i; //将this保存成一个变量，就可以在下面代码中调用对象的方法了 var _this = this; //此处这种方式调用函数，就不会改变clickBtn方法的所属关系 this.tabBtn[i].onclick = function(){ //注意此处不能直接使用this，this指向this.tabBtn[i] _this.clickBtn(); }; } }; //点击选项卡按钮 Tab.prototype.clickBtn = function(){ alert(this); //Object for(var j=0;j<this.tabBtn.length;j++){ this.tabBtn[j].className=''; this.tabDiv[j].style.display='none'; } this.className='active'; this.tabDiv[this.index].style.display='block'; };
4. 以参数的形式将点击的按钮传入clickBtn中
window.onload = function(){ var tab = new Tab("tabBox"); } /** * 选项卡 * @param {Object} id：选项卡id */ function Tab(id){ var tabBox = document.getElementById(id); this.tabBtn = tabBox.getElementsByTagName('input'); this.tabDiv = tabBox.getElementsByTagName('div'); for(var i=0;i<this.tabBtn.length;i++){ this.tabBtn[i].index = i; var _this = this; this.tabBtn[i].onclick = function(){ //注意参数this代表的是this.tabBtn[i]，即input按钮 _this.clickBtn(this); }; } }; //将点击的按钮以参数的形式传入 Tab.prototype.clickBtn = function(btn){ for(var j=0;j<this.tabBtn.length;j++){ this.tabBtn[j].className=''; this.tabDiv[j].style.display='none'; } btn.className='active'; this.tabDiv[btn.index].style.display='block'; };
5.最终版 —— 将代码提取到一个单独的js文件中，在用的时候引入即可。一般花大时间去写一个面向对象的程序，就是为了能够复用，以及方便的使用。
Tab.js
/** * 选项卡 * @param {Object} id 选项卡id */ function Tab(id){ var tabBox = document.getElementById(id); this.tabBtn = tabBox.getElementsByTagName('input'); this.tabDiv = tabBox.getElementsByTagName('div'); for(var i=0;i<this.tabBtn.length;i++){ this.tabBtn[i].index = i; var _this = this; this.tabBtn[i].onclick = function(){ _this.clickBtn(this); }; } }; /** * 为Tab原型添加点击选项卡方法 * @param {Object} btn 点击的按钮 */ Tab.prototype.clickBtn = function(btn){ for(var j=0;j<this.tabBtn.length;j++){ this.tabBtn[j].className=''; this.tabDiv[j].style.display='none'; } btn.className='active'; this.tabDiv[btn.index].style.display='block'; };
使用：tab.html 可以看到使用的时候，就可以很简单的创建两个选项卡出来了。
<!DOCTYPE html> <html> <head> <style> .tab input { background: #F6F3F3; border: 1px solid #FF0000; } .tab .active { background: #E9D4D4; } .tab div { width:300px; height:250px; display:none; padding: 10px; background: #E9D4D4; border: 1px solid #FF0000; } </style> <meta charset="utf-8" /> <title>选项卡</title> <!-- 引入tab.js --> <script type="text/javascript" src="https://www.jb51.net/js/tab.js" ></script> <script> window.onload = function(){ var tab1 = new Tab("tabBox1"); var tab2 = new Tab("tabBox2"); } </script> </head> <body> <div> <input type="button" value="主页" /> <input type="button" value="说说" /> <input type="button" value="日志" /> <div>这是主页内容</div> <div>这是说说内容</div> <div>这是日志内容</div> </div> <br /> <div> <input type="button" value="技术" /> <input type="button" value="工具" /> <input type="button" value="网站" /> <div>Js、Vue</div> <div>VSCode</div> <div>CSDN</div> </div> </body> </html>
再来简单总结一下JS面向对象中的this，this一般会在两种情况下出问题，一是使用定时器、二是事件，从上面的例子中也可以看出来。注意下面的说法是在构造函数里哦，其它情况下，this指向的是调用者。
可以看到效果没有将姓名显示出来，其实看到这里原因应该很清楚了，就是第14行代码中this.name，此处的this指向谁？指向window，因为setInterval是属于window的。
<!DOCTYPE html> <html> <meta charset="UTF-8" /> <head> <script> function Person(name){ this.name = name; //定时器 setInterval(this.showName, 3000); } Person.prototype.showName = function(){ alert(this); //window alert("姓名："+this.name); } var p1 = new Person("jiangzhou"); </script> </head> </html>