实例：面向对象的选项卡
- 原则：不能有函数套函数，但可以有全局变量。
- 过程
onload ---- 构造函数
全局变量 ---- 属性
函数 ---- 方法
- 改错
this、事件、闭包、传参
- 对象与闭包
通过闭包传递this。
面向过程：
<style>
#div1 input{
background: white;
}
#div1 input.active{
background: yellow;
}
#div1 div{
width: 200px;
height: 200px;
background: #cccccc;
display: none;
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oBtn=oDiv1.getElementsByTagName('input');
var oDiv=oDiv1.getElementsByTagName('div');
for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
for(var i=0;i<oBtn.length;i++){
oBtn[i].className='';
oDiv[i].style.display='none';
}
this.className='active';
oDiv[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="培训"/>
<input type="button" value="招生"/>
<input type="button" value="出国"/>
<div style="display: block">教育</div>
<div>培训</div>
<div>招生</div>
<div>出国</div>
</div>
</body>
1.函数不能嵌套。
<script>
var oBtn=null;
var oDiv=null;
function fnClick(){
for(var i=0;i<oBtn.length;i++){
oBtn[i].className='';
oDiv[i].style .display='none';
}
this.className='active';
oDiv[this.index].style.display='block';
}
window.onload=function(){
var oDiv1=document.getElementById('div1');
oBtn=oDiv1.getElementsByTagName('input');
oDiv=oDiv1.getElementsByTagName('div');
for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].onclick=fnClick;
}
}
</script>
window.onload：初始化整个程序 --------- 构造函数：初始化整个对象
变量 属性
函数 方法
<script>
//错误的。。。
window.onload=function(){
new TabSwitch('div1');
}
function TabSwitch(id){//变成构造函数
var oDiv1=document.getElementById(id);
this.oBtn=oDiv1.getElementsByTagName('input');
this.oDiv=oDiv1.getElementsByTagName('div');
for(var i=0;i<this.oBtn.length;i++){
this.oBtn[i].index=i;
this.oBtn[i].onclick=this.fnClick;
}
}
TabSwitch.prototype.fnClick= function(){
alert(this);//[object HTMLInputElement]的原因：fnClick本来是this上的一个方法，把它赋值赋给了onclick事件，this就变成了oBtn。
for(var i=0;i<this.oBtn.length;i++){//所以自然没有oBtn的属性。
this.oBtn[i].className='';//把变量变成属性。
this.oDiv[i].style.display='none';
}
this.className='active';
this.oDiv[this.index].style.display='block';
}
</script>
<script>
window.onload=function(){
new TabSwitch('div1');
}
function TabSwitch(id){//变成构造函数
var _this=this;
var oDiv1=document.getElementById(id);
this.oBtn=oDiv1.getElementsByTagName('input');
this.oDiv=oDiv1.getElementsByTagName('div');
for(var i=0;i<this.oBtn.length;i++){
this.oBtn[i].index=i;
this.oBtn[i].onclick=function(){
_this.fnClick(this);//这样做没有把fnClick转移到onclick上去，但是这个函数是个事件处理函数，这个this还是按钮。
}
}
}
TabSwitch.prototype.fnClick= function(oBtn){
for(var i=0;i<this.oBtn.length;i++){
this.oBtn[i].className='';
this.oDiv[i].style.display='none';
}
oBtn.className='active';
this.oDiv[oBtn.index].style.display='block';
}
</script>
![Android之UI学习篇九：使用TabHost实现卡片选项菜单[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)