选项卡面向对象练习
Posted where there is a will, there i
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选项卡面向对象练习相关的知识，希望对你有一定的参考价值。
面向对象的选项卡 原则 ：先写出普通的写法，然后改成面向对象写法 。
普通方法变型：
尽量不要出现函数嵌套函数
可以有全局变量
把onload中不是赋值的语句放到单独函数中
改成面向对象：
全局变量就是属性
函数就是方法
Onload中创建对象
改this指向问题
下面是普通代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} input{padding:5px 10px;} input.on{background: red;} #div1 div{width:200px;height:200px;border:1px solid #ccc;display: none;} </style> </head> <body> <div id="div1"> <input class="on" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display:block;">111</div> <div>222</div> <div>333</div> </div> <script> //普通写法 /*window.onload = function(){ var oParent = document.getElementById(\'div1\'); var aInput = oParent.getElementsByTagName(\'input\'); var aDiv = oParent.getElementsByTagName(\'div\'); for(var i = 0; i < aInput.length;i++){ //给每个input添加一个自定义属性index = 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 = \'on\'; aDiv[this.index].style.display=\'block\'; } } }*/ /* 普通方法先变型: 尽量不要出现函数嵌套函数 可以有全局变量 把onload中不是赋值的语句放到单独函数中 */ var oParent = null; var aInput = null; var aDiv = null; window.onload = function(){ oParent = document.getElementById(\'div1\'); aInput = oParent.getElementsByTagName(\'input\'); aDiv = oParent.getElementsByTagName(\'div\'); init(); function init(){ for(var i = 0; i < aInput.length;i++){ //给每个input添加一个自定义属性index = 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 = \'on\'; aDiv[this.index].style.display=\'block\'; } } </script> </body> </html>
面向对象改写如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
input{padding:5px 10px;}
input.on{background: red;}
#div1 div,#div2 div{width:200px;height:200px;border:1px solid #ccc;display: none;}
</style>
</head>
<body>
<div id="div1">
<input class="on" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block;">111</div>
<div>222</div>
<div>333</div>
</div>
<hr>
<div id="div2">
<input class="on" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block;">111</div>
<div>222</div>
<div>333</div>
</div>
<script>
//普通写法
/*window.onload = function(){
var oParent = document.getElementById(\'div1\');
var aInput = oParent.getElementsByTagName(\'input\');
var aDiv = oParent.getElementsByTagName(\'div\');
for(var i = 0; i < aInput.length;i++){
//给每个input添加一个自定义属性index = 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 = \'on\';
aDiv[this.index].style.display=\'block\';
}
}
}*/
/*
改成面向对象
全局变量就是属性
函数就是方法
Onload中创建对象
改this指向问题
*/
window.onload = function(){
var t1 = new Tab(\'div1\');
t1.init();
var t2 = new Tab(\'div2\');
t2.init();
};
function Tab(id){
this.oParent = document.getElementById(id);
this.aInput = this.oParent.getElementsByTagName(\'input\');
this.aDiv = this.oParent.getElementsByTagName(\'div\');
}
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 = \'on\';
this.aDiv[obj.index].style.display=\'block\';
}
</script>
</body>
</html>
效果如下:
以上是关于选项卡面向对象练习的主要内容，如果未能解决你的问题，请参考以下文章