原生JS代码实现选项卡效果（代码结构不够精简，欢迎大佬提建议）

版权声明：转载请先告知哦 https://blog.csdn.net/PINK789/article/details/87519386

html

<ul id="navWrap">
	<li class="item active">a</li>
	<li class="item">b</li>
	<li class="item">c</li>
</ul>
<ul id="container">
	<li class="nr active">A</li>
	<li class="nr">B</li>
	<li class="nr">C</li>
</ul>

---

CSS

<style type="text/css">
		li{list-style: none;}
		#navWrap{display: flex;}
		#navWrap li{flex: 1;border:1px green solid;}
		#navWrap li.active{background-color: red;}
		#container .nr{width: 200px;height: 100px;border:1px red solid;display: none;}
		#container .active{display: block}
		.none{display: none;}
	</style>

---

jacascript

window.onload=function(){
	var items = document.querySelectorAll(".item");
	var nrs = document.querySelectorAll(".nr");
	for(var i = 0;i < items.length ; i++){
		items[i].index = i;
		nrs[i].index = i;
		items[i].addEventListener("mouseover",function(){
			for(var k = 0;k < items.length;k++){
				items[k].className = "item";
				nrs[k].className = "nr";
			}		
			this.setAttribute("class","item"+" "+"active");
			nrs[this.index].setAttribute("class","nr"+" "+"active");
		},false)
	}

}