版权声明:转载请先告知哦 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)
}
}