超简单的选项卡

CSS样式

<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>

HTML中body主体代码

<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脚本

<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>