<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
color: #474747;
text-decoration: none;
display: block;
}
a:hover,
a.active {
color: #0fb340;
background-color: aliceblue;
}
nav.menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 2em;
line-height: 2em;
text-align: center;
}
nav.menu > a {
}
.box {
width: 70vw;
margin: 0 auto;
line-height: 2em;
border: 1px solid #333;
border-radius: 15px;
overflow: hidden;
}
ul {
background-color: aliceblue;
display: none;
}
ul.active {
display: block;
}
</style>
<div class="box">
<nav class="menu">
<a href="" class="active" data-index="1">阳泉</a>
<a href="" data-index="2">山西</a>
<a href="" data-index="3">全国</a>
</nav>
<ul class="active" data-index="1">
<li><a href="">阳泉是个山城,这里全是山</a></li>
<li><a href="">阳泉是个山城,这里全是山</a></li>
<li><a href="">阳泉是个山城,这里全是山</a></li>
<li><a href="">阳泉是个山城,这里全是山</a></li>
<li><a href="">阳泉是个山城,这里全是山</a></li>
</ul>
<ul data-index="2">
<li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
<li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
<li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
<li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
<li><a href="">山西省市里面,山最多的是阳泉和长治大峡谷</a></li>
</ul>
<ul data-index="3">
<li><a href="">全国山最多最密集的地方在重庆</a></li>
<li><a href="">全国山最多最密集的地方在重庆</a></li>
<li><a href="">全国山最多最密集的地方在重庆</a></li>
<li><a href="">全国山最多最密集的地方在重庆</a></li>
<li><a href="">全国山最多最密集的地方在重庆</a></li>
</ul>
</div>
<script>
const menu = document.querySelector(".menu");
menu.addEventListener("mouseover", show, false);
function show() {
// 关闭默认操作
event.preventDefault();
// nav.menu 里面 A标签 全部清除 active 样式
[...event.currentTarget.children].forEach((item) =>
item.classList.remove("active")
);
// nav.menu 里面 A标签 当鼠标选定时,添加active 样式
event.target.classList.add("active");
// 选中所有UL内容
const uls = document.querySelectorAll("ul");
// 清除所有UL的acitve 样式
uls.forEach((item) => item.classList.remove("active"));
// 将uls对象转为真数组
[...uls]
// 通过find函数,找到 nav.menu选项卡中(event.target.dataset.index)值与 ul内容中(item.dataset.index)相等的值
.find((item) => event.target.dataset.index == item.dataset.index)
// 为data-index 相等的值添加 active 样式
.classList.add("active");
}
</script>