切換目錄的方法，涉及到迴圈內呼叫函式的變數的問題
阿新 • • 發佈：2018-12-15
<!DOCTYPE html>
<html>
<head>
<title>顯示</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<style type="text/css">
div{
display: none;
}
</style>
</head>
<body>
<input type="button" value="選項1" id="but1" 點選事件內的i的變化
for迴圈內的i進入點選函式後，直接結束迴圈，變成5需要通過其他方法改變，我使用了新增閉包的方法。用jq寫原本準備寫更少的程式碼，結果發現並沒有簡便。
<!DOCTYPE html>
<html>
<head>
<title>tab頁切換練習</title>
<style type="text/css">
#tab div {
display: none;
}
#tab div.active {
display: block;
}
</style>
</head>
<body>
<div id="tab">
<input type="button" class="btn" value="選項卡1">
<input type="button" class="btn" value="選項卡2">
<input type="button" class="btn" value="選項卡3">
<input type="button" class="btn" value="選項卡4">
<div class="content active">選項卡1的內容</div>
<div class="content">選項卡2的內容</div>
<div class="content">選項卡3的內容</div>
<div class="content">選項卡4的內容</div>
</div>
</body>
<script type="text/javascript">
// tab切換按鈕列表
var btns = document.getElementsByClassName("btn");
// 內容div列表
var divs = document.getElementsByClassName("content");
// for (var i = 0; i < btns.length; i++) {
// btns[i].index = i;
// // i 是當前的索引
// btns[i].onclick = function () {
// // 1. 將div全部隱藏
// for (var j = 0; j < divs.length; j++) {
// divs[j].className = "content";
// }
// // 2. 將當前按鈕對應索引的div顯示
// divs[this.index].className = "content active";
// }
// }
for (var i = 0; i < btns.length; i++) {
// i 是當前的索引
btns[i].onclick = (function (index) {
return function () {
// 1. 將div全部隱藏
for (var j = 0; j < divs.length; j++) {
divs[j].className = "content";
}
// 2. 將當前按鈕對應索引的div顯示
divs[index].className = "content active";
}
})(i);
}
</script>
</html>
上面是兩種比較簡便的方法
直接用給input 和div賦class類，class較於id而言比較相容更多的內容，可以通用，而id具有唯一性。而用class得到的是陣列型別，可以通過索引得到指定的div然後更改屬性。其中，為了i能進入迴圈，改程式碼將i賦給一個index屬性，迴圈直接取index屬性的相應的值。