/* //面向过程 window.onload = function(){ var oDiv = document.getElementById('div1'); var aBtn = oDiv.getElementsByTagName('input'); var aDiv = oDiv.getElementsByTagName('div'); for(var i=0; i<aBtn.length; i++){ aBtn[i].index = i; aBtn[i].onclick = function(){ for(var i=0; i<aBtn.length; i++){ aBtn[i].className = ''; aDiv[i].style.display = 'none'; } this.className = 'active'; aDiv[this.index].style.display = 'block'; } }; }; */ /******************************** 改写步骤: window.onload 初始化整个程序 构造函数 初始化整个对象 变量 函数 属性 方法 1、原则:不能有全套函数,但可以有全局变量(尽量没有) 2、过程:onload 改 构造函数 全局变量 改 属性 函数 改 方法 3、改错:this、事件、闭包、传参 *********************************/ // 面向对象 window.onload = function(){ new TabSwitch('div1'); } function TabSwitch(id){ var _this = this; var oDiv = document.getElementById(id); 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 _this.fnClick(this); } }; }; TabSwitch.prototype.fnClick = function(oBtn){ for(var i=0; i<this.aBtn.length; i++){ this.aBtn[i].className = ''; this.aDiv[i].style.display = 'none'; } oBtn.className = 'active'; this.aDiv[oBtn.index].style.display = 'block'; }