文章目錄
一、使用面向對象寫一個選項卡
1.1 先用面向過程寫一個選項卡
在使用面向對象寫一個選項卡的時候，我們還是先用面向過程來寫一個選項卡，如下：
<body>
<div id="div1">
<input class="active" type="button" value="A">
<input type="button" value="B">
<input type="button" value="C">
<div style="display: block;">AAAAA</div>
<div>BBBBB</div>
<div>CCCCC</div>
</div>
</body>
<style>
#div1>input{background: white;}
#div1 input.active{
background: yellow;
}
#div1 div{
width: 200px;
height: 200px;
background-color: #CCC;
display: none;
}
</style>
<script>
window.onload=function(){
var oDiv = document.getElementById('div1');
var btn = oDiv.getElementsByTagName('input');
var aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onclick=function(){
for(var j=0;j<btn.length;j++){
btn[j].className='';
aDiv[j].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
}
}
</script>
一個i簡單的選項卡就完成了
效果：
1.2 正式開始使用面向對象寫一個選項卡
現在我們開始來改造這個函數，使其成爲面向對象的選項卡。
我們需要明確目標，需要做到以下幾個步驟：
- 不能有函數嵌套 (因爲有的話，那麼就沒有必要了)
- 把window.onload 換成我們熟悉的對象(構造函數)
- 把零散的變量全部變爲對象的屬性
- 把函數變爲對象的方法
1.2.1、解決函數嵌套
我們只需要把內部的函數提到外邊來，再在裏邊調用即可：
需要注意的是： 由於我們把函數提到外邊，因此我們在window.onload裏邊定義的變量就無法使用了，所以我們要把window.onload裏邊的變量提升爲全局變量，方法也很簡單，我們在外邊定義即可。
<script>
var aDiv=null;
var btn = null;
window.onload=function(){
var oDiv = document.getElementById('div1');
btn = oDiv.getElementsByTagName('input');
aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onclick=fnClick;
}
}
function fnClick(){
for(var j=0;j<btn.length;j++){
btn[j].className='';
aDiv[j].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
</script>
改動過後，運行一下。程序沒報錯，Perfect
1.2.2 pass掉window.onload
這裏順便加了一個id，目的是方便通用；
<script>
var aDiv=null;
var btn = null;
function TabSwitch(id){
var oDiv = document.getElementById(id);
btn = oDiv.getElementsByTagName('input');
aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<btn.length;i++){
btn[i].index=i;
btn[i].onclick=fnClick;
}
}
function fnClick(){
for(var j=0;j<btn.length;j++){
btn[j].className='';
aDiv[j].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
</script>
1.2.3 把變量作爲屬性 函數變爲方法 並且改錯 、傳參、閉包
<script>
window.onload=function(){
new TabSwitch('div1');
}
function TabSwitch(id){
var _this = this;
var oDiv = document.getElementById(id);
this.btn = oDiv.getElementsByTagName('input');
this.aDiv = oDiv.getElementsByTagName('div');
for(var i=0;i<this.btn.length;i++){
this.btn[i].index=i;
this.btn[i].onclick=function(){
_this.fnClick(this);
};
}
}
TabSwitch.prototype.fnClick=function (btn){
for(var j=0;j<this.btn.length;j++){
this.btn[j].className='';
this.aDiv[j].style.display='none';
}
btn.className='active';
this.aDiv[btn.index].style.display='block';
}
</script>
博客到這裏也就結束了，其中有什麼不懂的地方可以留言或者私信，筆者看到過後都會第一時間回覆的。
如果你覺的還不錯的話，請點贊支持一下！