核心提示：this大作战：用面向对象写现象卡效果!DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle type=text/css#p1 input{ba...
this大作战：用面向对象写现象卡效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#p1 input{
background: white;
}
.active{
background: yellow !important;
}
#p1 p{
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
</style>
</head>
<body>
<p id="p1">
<input type="button" class="active" value="a"/>
<input type="button" name="" id="" value="b" />
<input type="button" name="" id="" value="c" />
<p style="display: block;">aaa</p>
<p>bbb</p>
<p>ccc</p>
</p>
</body>
<script type="text/javascript">
/*
* 面向过程的选型卡写法
*/
/* var oDiv=document.getElementById('p1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('p');
for (var i=0;i<aBtn.length;i++) {
aBtn[i].index=i;
aBtn[i].onclick=function(){
for (var k=0;k<aBtn.length;k++) {
aBtn[k].className='';
aDiv[k].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
}*/
/*
*面向对象方法选项卡
*/
//使用
new Tab('p1');
//构建函数：+属性；
function Tab(id){
//var this=new Object();
var oDiv=document.getElementById(id);
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('p');
var _this=this;//this为object
for (var i=0;i<this.aBtn.length;i++) {
this.aBtn[i].index=i;
this.aBtn[i].onclick=function(){
_this.click(this);
};
}
}
//原型：+方法
Tab.prototype.click=function(obj){
for (var k=0;k<this.aBtn.length;k++) {
this.aBtn[k].className='';
this.aDiv[k].style.display='none';
}
obj.className='active';
this.aDiv[obj.index].style.display='block';
}
</script>
</html>
vc3RvbmUxMDA4Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="1360" />中心思想：
1、利用面向过程写选项卡改写为面向对象写法;
2、构建函数写属性;原型写方法;调用;
3、关键是各this代表的意义;
