核心提示：Tab切换之面向对象实例教程!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttps://www.w3.org/TR/xhtml...
Tab切换之面向对象实例教程
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Tab切换之面向对象</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no"/>
<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
*{margin: 0;padding: 0;}
#p1 p,#p2 p{
display: none;
width: 200px;
height: 200px;
border: 1px solid;
}
#p1 .active,#p2 .active{
color: #fff;
background: red;
}
</style>
</head>
<body>
<p id="p1">
<input class="active" type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />
<p style="display:block">111</p>
<p>222</p>
<p>333</p>
</p>
<p id="p2">
<input class="active" type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />
<p style="display:block">111</p>
<p>222</p>
<p>333</p>
</p>
<script type="text/javascript">
//改成面向对象、不能函数嵌套函数单独拎出来
//全局变量就是属性
//函数就是方法
//onload中创建对象
//this 指向问题 尽量指向对象
window.onload = function(){
var t1 = new Tab('p1');
t1.init();
var t2 = new Tab('p2');
t2.init();
t2.Autoplay();
};
function Tab(id){
this.oDiv1 = document.getElementById(id);
this.oInput = this.oDiv1.getElementsByTagName('input');
this.oDiv = this.oDiv1.getElementsByTagName('p');
this.iNow = 0;
}
Tab.prototype.init = function() {
var This = this;
for(var i = 0;i<this.oInput.length;i++){
this.oInput[i].index = i;
this.oInput[i].onclick = function(){
This.Change(this);
}
}
};
Tab.prototype.Change = function(obj){
for(var i = 0;i<this.oInput.length;i++){
this.oInput[i].className = '';
this.oDiv[i].style.display = 'none';
}
obj.className = 'active';
this.oDiv[obj.index].style.display = 'block';
}
Tab.prototype.Autoplay = function(){
var This = this;
setInterval(function(){
if(This.iNow == This.oInput.length-1){
This.iNow = 0;
}else{
This.iNow++;
}
for(var i = 0;i<This.oInput.length;i++){
This.oInput[i].className = '';
This.oDiv[i].style.display = 'none';
}
This.oInput[This.iNow].className = 'active';
This.oDiv[This.iNow].style.display = 'block';
},1500)
};
</script>
</body>
</html>
