重点是this指向问题
<style>
.hide{display: none;}
#box div,#box1 div{display: none;}
.hover{background: #fff666;}
</style>
<script>
// window.onload = function () {
// var aParent = document.getElementById('box');
// var aInput = aParent.getElementsByTagName('input');
// var aDiv = aParent.getElementsByTagName('div');
// for(var i=0;i<aInput.length;i++){
// //索引
// aInput[i].index = i;
//
// aInput[i].onclick = function () {
// //清除全部的样式
// for(var i=0;i<aInput.length;i++){
// aInput[i].className ='';
// aDiv[i].style.display = 'none';
// }
// this.className = 'hover';
// aDiv[this.index].style.display = 'block';
// }
// }
// }
//先变形
//尽量不要出现函数嵌套函数
//可以有全局变量
//把onload中不是赋值语句放到单独的函数中
// var aParent = null;
// var aInput = null;
// var aDiv = null;
// window.onload = function () {
// aParent = document.getElementById('box');
// aInput = aParent.getElementsByTagName('input');
// aDiv = aParent.getElementsByTagName('div');
//
// init();
// };
// function init() {
// for(var i=0;i<aInput.length;i++){
// //索引
// aInput[i].index = i;
//
// aInput[i].onclick = onChange;
// }
// }
//
// function onChange() {
// //清除全部的样式
// for(var i=0;i<aInput.length;i++){
// aInput[i].className ='';
// aDiv[i].style.display = 'none';
// }
// this.className = 'hover';
// aDiv[this.index].style.display = 'block';
// }
//改成面向对象
//全局变量就是属性
//函数就是方法
//onload中创建对象
//改this指向问题: 事件或者定时器,尽量让面向对象中的this指向对象
window.onload = function () {
var t1 = new Tab('box');
t1.init();
t1.autoPlay();
var t2 = new Tab('box1');
t2.init();
t2.autoPlay();
};
function Tab(id) {
this.aParent = document.getElementById(id);
this.aInput = this.aParent.getElementsByTagName('input');
this.aDiv = this.aParent.getElementsByTagName('div');
this.isNow = 0;
}
Tab.prototype.init = function () {
//让this指向对象
var This = this;
for(var i=0;i<this.aInput.length;i++){
//索引
this.aInput[i].index = i;
this.aInput[i].onclick = function(){
//this.onChange(); //1.当前的this是指向按钮的
This.onChange(this);//3.把按钮的this当参数传过去
}
}
};
Tab.prototype.onChange = function (btnThis) {
//清除全部的样式
for(var i=0;i<this.aInput.length;i++){
this.aInput[i].className ='';
this.aDiv[i].style.display = 'none';
}
btnThis.className = 'hover';
this.aDiv[btnThis.index].style.display = 'block';
};
Tab.prototype.autoPlay = function () {
var This = this;
setInterval(function () {
if (This.isNow == This.aInput.length-1){
This.isNow = 0;
}else {
This.isNow ++;
}
for(var i=0;i<This.aInput.length;i++){
This.aInput[i].className ='';
This.aDiv[i].style.display = 'none';
}
This.aInput[This.isNow].className = 'hover';
This.aDiv[This.isNow].style.display = 'block';
},2000);
};
</script>
</head>
<body>
<div id="box">
<input class="hover" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block">1111</div>
<div>2222</div>
<div>3333</div>
</div>
<div id="box1">
<input class="hover" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block">1111</div>
<div>2222</div>
<div>3333</div>
</div>
</body>