執行個體：面向對象的頁籤
- 原則：不能有函數套函數，但可以有全局變量。
- 過程
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=)