超级简单的tab标签页

前端开发洋洋

已于 2024-08-09 17:48:01 修改

阅读量108

点赞数 1

文章标签： javascript 前端 css

于 2024-08-09 17:44:45 首次发布

本文链接：https://blog.csdn.net/Java_Coder2021/article/details/141067894

版权

鼠标mouseenter便签时，对应的面板也更改

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .tabs ul {
        display: flex;
      }
      .tabs li {
        padding: 10px;
        border: 1px solid pink;
      }
      .tabs li:hover {
        color: red;
        cursor: pointer;
      }
      .tabs li.tab-active {
        color: red;
      }
      li {
        list-style: none;
      }
      .panels ul {
        display: flex;
      }
      .panels li {
        display: none;
        padding: 20px;
        border: 1px solid blue;
      }
      .panels .panel-active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="tabs">
        <ul>
          <li class="tab-active">01</li>
          <li>02</li>
          <li>03</li>
        </ul>
      </div>
      <div class="panels">
        <ul>
          <li class="panel-active">000111</li>
          <li>000222</li>
          <li>000333</li>
        </ul>
      </div>
    </div>
    <script>
      const tabLi = document.querySelectorAll(".tabs li")

      for (let i = 0; i < tabLi.length; i++) {
        console.log(i)
        tabLi[i].addEventListener("mouseenter", function () {
          document
            .querySelector(".tabs .tab-active")
            .classList.remove("tab-active")
          this.classList.add("tab-active")
          document
            .querySelector(".panels .panel-active")
            .classList.remove("panel-active")
          document
            .querySelector(`.panels li:nth-child(${i + 1})`)
            .classList.add("panel-active")
        })
      }
    </script>
  </body>
</html>