普通函数改写为构造函数。
前提：
1.所有的东西都在onload里；
2.不能有函数嵌套，可以有全局变量；
改写过程：
<script type="text/javascript">window.onload = function () {var oTab = new TabSwitch("div2");}var aBtn = null;var aDiv = null;function TabSwitch(id){var div2 = document.getElementById(id);this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性this.aDiv = document.getElementsByClassName('box');for(i=0;i<this.aBtn.length;i++){this.aBtn[i].index = i;this.aBtn[i].onclick = this.tab;//是当前对象的方法，所以给tab添加this}}TabSwitch.prototype.tab = function (){//函数 转变成对象的方法for(i=0;i<this.aBtn.length;i++){this.aBtn[i].className = '';this.aDiv[i].style.display = 'none';}this.aDiv[this.index].style.display = 'block';this.className = 'active';}</script>
3. 解决this问题：
<script type="text/javascript">window.onload = function () {var oTab = new TabSwitch("div2");}var aBtn = null;var aDiv = null;function TabSwitch(id){var div2 = document.getElementById(id);this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性this.aDiv = document.getElementsByClassName('box');var _this =this;//将这里的对象this存入_this中，方便在按钮点击里面用for(i=0;i<this.aBtn.length;i++){this.aBtn[i].index = i;this.aBtn[i].onclick = function () {_this.tab(this);//这里的this指的是按钮，把它作为参数传到函数中； }}}TabSwitch.prototype.tab = function (aBtn){//函数 转变成对象的方法// alert(this); //input// alert(this); //这里的this指的是对象object;for(i=0;i<this.aBtn.length;i++){this.aBtn[i].className = '';this.aDiv[i].style.display = 'none';}aBtn.className = 'active';this.aDiv[aBtn.index].style.display = 'block';}</script>
最后：完整案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>面向对象-选项卡</title><style>.box{display:none;}</style></head><body><div id="div2"><input class="active" type="button" value="王立娟"><input type="button" value="同学"><input type="button" value="几点上课"></div><div class="box" style="display:block;">11</div><div class="box">22</div><div class="box">33</div></body></html><script type="text/javascript">window.onload = function () {var oTab = new TabSwitch("div2");}var aBtn = null;var aDiv = null;function TabSwitch(id){var div2 = document.getElementById(id);this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性this.aDiv = document.getElementsByClassName('box');var _this =this;//将这里的对象this存入_this中，方便在按钮点击里面用for(i=0;i<this.aBtn.length;i++){this.aBtn[i].index = i;this.aBtn[i].onclick = function () {_this.tab(this);//这里的this指的是按钮，把它作为参数传到函数中； }}}TabSwitch.prototype.tab = function (aBtn){//函数 转变成对象的方法// alert(this); //input// alert(this); //这里的this指的是对象object;for(i=0;i<this.aBtn.length;i++){this.aBtn[i].className = '';this.aDiv[i].style.display = 'none';}aBtn.className = 'active';this.aDiv[aBtn.index].style.display = 'block';}</script>
如果觉得《面向对象-选项卡》对你有帮助，请点赞、收藏，并留下你的观点哦！
