面向过程的实现方式
window.onload = function(){
var oDiv = document.getElementById('div1');
var oBtn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i = 0; i < oBtn.length; i++){
oBtn[i].index = i //给元素添加自定义属性
oBtn[i].onclick = function(){
for(var i = 0; i < oBtn.length; i++){
oBtn[i].className = ''
aDiv[i].style.display = 'none'
}
this.className = 'active'
aDiv[this.index].style.display = 'block'
}
}
}
改成面向对象方式
改写过程:1、不能让函数有嵌套,可以有全局变量
2、全局变量 改成 属性
3、函数 改成 方法
<script>
window.onload = function(){
new TabSwitch('div1')
}
function TabSwitch(id) {
var oDiv = document.getElementById(id)
this.aBtn = oDiv.getElementsByTagName('input')
this.aDiv = oDiv.getElementsByTagName('div')
var _this = this
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index = i
this.aBtn[i].onclick = function(){
_this.fnClick(this) //this指定问题,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'
}
</script>