用es6的方法寫選項卡（和構造函數的方法很相似）

時間 2019-11-12

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="tab">
<div id="btns">
<button type="button">1</button>
<button type="button">2</button>
<button type="button">3</button>
</div>
<div id="boxs">
<div id="">
1
</div>
<div id="" style="display: none;">
2
</div>
<div id="" style="display: none;">
3
</div>
</div>
</div>

<script type="text/javascript">
//字面量
// 構造函數
// 類
//架構師主程

let tab = {
btns:document.querySelectorAll('#btns button'),
boxs:document.querySelectorAll('#boxs div'),
selectedIndex:1,
init(){
//init 初始化
this.selectedBtnOfIndex(this.selectedIndex)
this.selectedBoXOfIndex(this.selectedIndex)

//給按鈕增長點擊事件
this.btnsEvent()

//根據下標顯示對應 div

},
btnsEvent(){
//this 是 tab對象
//在對象的方法內部使用匿名函數或者添加事件

let that = this;//1 定義that 保存this
for(let i=0;i<this.btns.length;i++){
//2 事件函數寫成箭頭函數,函數中his 就跟外部this同樣
this.btns[i].onclick = function(){
console.log(i,this);
//this 指的點擊的按鈕
//根據下標讓對應的按鈕顯示樣式
// that.selectedBtnOfIndex(i) //1
this.selectedBtnOfIndex(i) //2
this.selectedBoXOfIndex(i)
}.bind(this)//3 將外部this 綁定到函數內部
}
},
selectedBtnOfIndex(index){
for(let i=0;i<this.btns.length;i++){
this.btns[i].style.color = ''
}
this.btns[index].style.color = 'red'
},
selectedBoXOfIndex(index){
for(let i=0;i<this.boxs.length;i++){
this.boxs[i].style.display = 'none'
}
this.boxs[index].style.display = 'block'
}

}
tab.init()
</script>
</body>
</html>javascript