欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用面向对象的方法写选项卡功能

程序员文章站 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>

  

这样看就觉得好用多了

相关标签: js 面向对象