<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 input{
background: white;
}
.active{
background: yellow !important;
}
#div1 div{
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
</style>
</head>
<body>
<div id="div1">
<input type="button" class="active" value="a"/>
<input type="button" name="" id="" value="b" />
<input type="button" name="" id="" value="c" />
<div style="display: block;">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</body>
<script type="text/javascript">
/*
* 面向过程的选型卡写法
*/
/* var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
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('div1');
//构建函数:+属性;
function Tab(id){
//var this=new Object();
var oDiv=document.getElementById(id);
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('div');
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>
中心思想:
1、利用面向过程写选项卡改写为面向对象写法;
2、构建函数写属性;原型写方法;调用;
3、关键是各this代表的意义;