Js選項卡（切換Tap欄）問題

css樣式：點擊按鈕背景變色，顯示對應的選項卡

    <style>
        button.active{
            background:#03ccbb;
        }
        .dis div{
            width: 300px;
            height: 100px;
            line-height: 100px;
            font-size: 50px;
            text-align: center;
            background: #F90;
            border: solid 1px #000;
            display: none;
        }
        .dis div.active{
            display: block;
        }
    </style>

div設置：有四個5個按鈕  5個選項框

    <div class="tab">
		<div class="btns">
			<button>選項01</button>
			<button>選項02</button>
			<button>選項03</button>
			<button>選項04</button>
			<button>選項05</button>
		</div>
		<div class="dis">
			<div>選項01</div>
			<div>選項02</div>
			<div>選項03</div>
			<div>選項04</div>
			<div>選項05</div>
		</div>
	</div>

js: 

	<script>
		// 獲取按鈕
		var btns = document.querySelectorAll('.btns button');
		// 獲取下面的選項卡div
		var divs = document.querySelectorAll('.dis div');

		for(var i=0; i<btns.length; i++){
			btns[i].index = i;   //獲取下標
			btns[i].onclick=function(){
				// 循環遍歷讓對應的元素class屬性值爲空
				for(var i=0; i<btns.length; i++){
					btns[i].className = "";
					divs[i].className = "";
				}
				// 屬性值爲active,背景變化，div顯示
				this.className = "active";
				divs[this.index].className = "active";
			}
		}
	</script>

其中，因爲外層for循環總是打印最後一個i，所以要使用btns[i].index = i; this：對應的btn按鈕。用於獲取元素下標，divs[this.index]，就是每次點擊對應的選項卡div.(在另一篇（Js for循環總打印最後一個值）文章中有說到)。另一種解決方案：把var換成let即可解決此問題。

	<script>
		var btns = document.querySelectorAll('.btns button');
		var divs = document.querySelectorAll('.dis div');

		for(let i=0; i<btns.length; i++){
			btns[i].onclick=function(){
				for(let i=0; i<btns.length; i++){
					btns[i].className = "";
					divs[i].className = "";
				}
				this.className = "active";
				divs[i].className = "active";
			}
		}
	</script>