JS - APIs Tab栏切换

原创已于 2025-05-21 20:54:00 修改 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2025-05-21 15:58:25 首次发布

前端专栏收录该内容

24 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab栏切换</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .tab {
        width: 590px;
        height: 340px;
        margin: 20px;
        border: 1px solid #e4e4e4;
      }

      .tab-nav {
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
      }

      .tab-nav h3 {
        font-size: 24px;
        font-weight: normal;
        margin-left: 20px;
      }

      .tab-nav ul {
        list-style: none;
        display: flex;
        justify-content: flex-end;
      }

      .tab-nav ul li {
        font-size: 14px;
        margin: 0 20px;
      }

      .tab-nav ul li a {
        text-decoration: none;
        border-bottom: 2px solid transparent;
        color: #333;
      }

      .tab-nav ul li a.active {
        border-color: #e1251b;
        color: #e1251b;
      }

      .tab-content {
        padding: 0 16px;
      }

      .tab-content .item {
        display: none;
      }

      .tab-content .item.active {
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="tab">
      <div class="tab-nav">
        <h3>色系美照</h3>
        <ul>
          <!-- href="javascript:;确保点击链接时不会跳转页面 -->
          <li><a class="active" href="javascript:;">黑色</a></li>
          <li><a href="javascript:;">黄色</a></li>
          <li><a href="javascript:;">白色</a></li>
          <li><a href="javascript:;">蓝色</a></li>
          <li><a href="javascript:;">桂色</a></li>
        </ul>
      </div>
      <div class="tab-content">
        <div class="item active"><img src="images/zly01.png" alt="" /></div>
        <div class="item"><img src="images/zly02.png" alt="" /></div>
        <div class="item"><img src="images/zly03.png" alt="" /></div>
        <div class="item"><img src="images/zly04.png" alt="" /></div>
        <div class="item"><img src="images/zly05.png" alt="" /></div>
      </div>
    </div>
    <script>
      // tab-nav模块
      const aS = document.querySelectorAll(".tab-nav a");
      const itemS = document.querySelectorAll(".tab-content .item");
      console.log(aS);
      for (let i = 0; i < aS.length; i++) {
        aS[i].addEventListener("mouseenter", function () {
          // 移除其他的active
          document.querySelector(".tab-nav .active").classList.remove("active");
          // 添加当前的
          this.classList.add("active");

          // tab-content模块
          document
            .querySelector(".tab-content .active")
            .classList.remove("active");
          // 对应序号的item添加
          // itemS[i].classList.add("active");
          document
            .querySelector(`.tab-content .item:nth-child(${i + 1})`)
            .classList.add("active");
        });
      }
    </script>
  </body>
</html>

使用事件委托，优化代码，减少注册次数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab栏切换</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .tab {
        width: 590px;
        height: 340px;
        margin: 20px;
        border: 1px solid #e4e4e4;
      }

      .tab-nav {
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
      }

      .tab-nav h3 {
        font-size: 24px;
        font-weight: normal;
        margin-left: 20px;
      }

      .tab-nav ul {
        list-style: none;
        display: flex;
        justify-content: flex-end;
      }

      .tab-nav ul li {
        font-size: 14px;
        margin: 0 20px;
      }

      .tab-nav ul li a {
        text-decoration: none;
        border-bottom: 2px solid transparent;
        color: #333;
      }

      .tab-nav ul li a.active {
        border-color: #e1251b;
        color: #e1251b;
      }

      .tab-content {
        padding: 0 16px;
      }

      .tab-content .item {
        display: none;
      }

      .tab-content .item.active {
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="tab">
      <div class="tab-nav">
        <h3>色系美照</h3>
        <ul>
          <!-- href="javascript:;确保点击链接时不会跳转页面 -->
          <!-- data-自定义属性 ，对象.dataset.id可以得到数字 -->
          <li><a class="active" href="javascript:;" data-id="0">黑色</a></li>
          <li><a href="javascript:;" data-id="1">黄色</a></li>
          <li><a href="javascript:;" data-id="2">白色</a></li>
          <li><a href="javascript:;" data-id="3">蓝色</a></li>
          <li><a href="javascript:;" data-id="4">桂色</a></li>
        </ul>
      </div>
      <div class="tab-content">
        <div class="item active"><img src="images/zly01.png" alt="" /></div>
        <div class="item"><img src="images/zly02.png" alt="" /></div>
        <div class="item"><img src="images/zly03.png" alt="" /></div>
        <div class="item"><img src="images/zly04.png" alt="" /></div>
        <div class="item"><img src="images/zly05.png" alt="" /></div>
      </div>
    </div>
    <script>
      // 2.使用事件委托
      const ul = document.querySelector(".tab-nav ul");
      const content = document.querySelector(".tab-content");
      ul.addEventListener("click", function (e) {
        if (e.target.tagName === "A") {
          // 移除所有导航的active
          document.querySelector(".tab-nav .active").classList.remove("active");
          // 为被点击的导航添加active
          e.target.classList.add("active");
          // 移除大盒子所有的active
          document
            .querySelector(`.tab-content .active`)
            .classList.remove("active");
          // 得到被点击的自定义属性的id
          // !!!!自定义属性id为字符串型,'1'+1=11,需要转为数字型
          const i = +e.target.dataset.id;
          // 为被点击的导航对应大盒子添加active
          document
            .querySelector(`.tab-content .item:nth-child(${i + 1})`)
            .classList.add("active");
        }
      });
    </script>
  </body>
</html>