用面向对象的方法写选项卡功能
程序员文章站
2022-07-12 17:10:21
...
了解了面向对象之后，那我们来写下选项卡，，，
面向对象的选项卡
原则
先写出普通的写法，然后改成面向对象写法
普通方法变型
尽量不要出现函数嵌套函数
可以有全局变量
把onload中不是赋值的语句放到单独函数中
改成面向对象
全局变量就是属性
函数就是方法
Onload中创建对象
改this指向问题
<style>
#div1 div, #div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script>
var oParent = null;
var aInput = null;
var aDiv = null;
window.onload=function(){
var oParent = document.getElementById("div1");
var aInput = oParent.getElementsByTagName("input");
var aDiv = oParent.getElementsByTagName("div");
init();
};
function init(){
for(var i=0; i<aInput.length;i++){
aInput[i].index = i;
aInput[i].onclick=change;
}
}
function change(){
for(var i=0; i<aInput.length;i++){
aInput[i].className="";
aDiv[i].style.display="none";
}
this.className="active";
aDiv[this.index].style.display="block";
}
</script>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
</div>
这个是我们的传统写法
下面是我们改成面向对象的写法：
<style>
#div1 div, #div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<body>
<script>
window.onload = function(){
var t1 = new Tab("div1");
t1.init();
}
function Tab(id){
this.oParent = document.getElementById(id);
this.aInput = this.oParent.getElementsByTagName("input");
this.aDiv = this.oParent.getElementsByTagName("div");
this.iNow = 0;
}
Tab.prototype.init = function(){
var This = this;
for(var i=0; i<this.aInput.length;i++){
this.aInput[i].index = i;
this.aInput[i].onclick=function(){
This.change(this);
}
}
}
Tab.prototype.change = function(obj){
for(var i=0; i<this.aInput.length;i++){
this.aInput[i].className="";
this.aDiv[i].style.display="none";
}
obj.className="active";
this.aDiv[obj.index].style.display="block";
}
</script>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
</div>
看代码的话，简单的功能可能用面向对象会觉得还复杂些。
如果说我们页面中有多个选项卡，第二选项卡多了一个自动播放的功能，，
那么我们可以这样添加
<style>
#div1 div, #div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<body>
<script>
window.onload = function(){
var t1 = new Tab("div1");
t1.init();
var t2 = new Tab("div2");
t2.init();
t2.autoPlay();
}
function Tab(id){
this.oParent = document.getElementById(id);
this.aInput = this.oParent.getElementsByTagName("input");
this.aDiv = this.oParent.getElementsByTagName("div");
this.iNow = 0;
}
Tab.prototype.init = function(){
var This = this;
for(var i=0; i<this.aInput.length;i++){
this.aInput[i].index = i;
this.aInput[i].onclick=function(){
This.change(this);
}
}
}
Tab.prototype.change = function(obj){
for(var i=0; i<this.aInput.length;i++){
this.aInput[i].className="";
this.aDiv[i].style.display="none";
}
obj.className="active";
this.aDiv[obj.index].style.display="block";
}
Tab.prototype.autoPlay = function(){
var This = this;
setInterval(function(){
if(This.iNow == This.aInput.length-1){
This.iNow = 0;
}
else{
This.iNow++;
}
for(var i=0;i<This.aInput.length;i++){
This.aInput[i].className = '';
This.aDiv[i].style.display = 'none';
}
This.aInput[This.iNow].className = 'active';
This.aDiv[This.iNow].style.display = 'block';
},2000);
}
</script>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
</div>
<div id="div2">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<div style="display:block">11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
</div>
</body>
这样看就觉得好用多了
上一篇： 用面向对象的方法写选项卡功能
下一篇： 恺撒与基督： 罗马帝国面积