Js选项卡（切换Tap栏）问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a5252145/article/details/82051571

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>