当前位置：首页 > article >正文

前端学习-tab栏切换改造项目（三十一）

article 2025/2/7 16:47:32

前言

监听代码

思路

代码

事件委托代码

思路

代码

总结

前言

星垂平野阔，月涌大江流

监听代码

思路

等待DOM加载完成

获取所有标签

为每个标签添加鼠标悬停事件监听器

定义showTab函数：

接收一个索引参数index，用于标识当前悬停的标签

获取所有的标签和内容项

移除所有active类

为当前悬停的标签&&对应的内容添加active类

代码

<!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>
    .tab {
      width: 100%;
      height: 100%;
    }

    .tab-nav {
      width: 490px;
      height: 40px;
      background-color: #fff;
      border: 1px solid #020202;
      display: flex;
      align-items: center;
    }

    .tab-nav ul {
      list-style-type: none;
      padding-left: 0;
      margin: 0;
      display: flex;
    }

    .tab-nav ul li {
      margin-right: 20px;
      height: 40px;
      display: flex;
      align-items: center;
    }

    .tab-nav ul li a {
      text-decoration: none;
      color: inherit;
      padding: 0 10px;
    }

    .tab-nav ul li a:hover {
      color: red;
    }

    .tab-nav ul li:hover {
      background-color: gray;
    }

    .tab-nav h3 {
      margin-right: 20px;
      margin-left: 20px;
    }

    .tab-content {
      width: 450px;
      padding: 20px;
      border: 1px solid #020202;
      border-top: none;
      height: 300px;
      /* 增加高度以容纳更多内容 */
      overflow-y: auto;
      /* 添加滚动条 */
    }

    .tab-content .item {
      display: none;
      margin-bottom: 20px;
    }

    .tab-content .item.active {
      display: block;
    }

    .item h2 {
      color: #333;
    }

    .item p {
      color: #666;
    }

    .item img {
      max-width: 100%;
      height: auto;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <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">
        <h2>精选内容</h2>
        <p>这里是精选内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="精选图片">
      </div>
      <div class="item">
        <h2>美食内容</h2>
        <p>这里是美食内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="美食图片">
      </div>
      <div class="item">
        <h2>百货内容</h2>
        <p>这里是百货内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="百货图片">
      </div>
      <div class="item">
        <h2>母婴内容</h2>
        <p>这里是母婴内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="母婴图片">
      </div>
      <div class="item">
        <h2>图书内容</h2>
        <p>这里是图书内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="图书图片">
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tabs = document.querySelectorAll('.tab-nav ul li a');
      tabs.forEach((tab, index) => {
        tab.addEventListener('mouseenter', function () {
          showTab(index);
        });
      });

      function showTab(index) {
        const tabs = document.querySelectorAll('.tab-nav ul li a');
        const contents = document.querySelectorAll('.tab-content .item');

        tabs.forEach(tab => tab.classList.remove('active'));
        contents.forEach(content => content.classList.remove('active'));

        tabs[index].classList.add('active');
        contents[index].classList.add('active');
      }
    });
  </script>
</body>

</html>

事件委托代码

思路

等待DOM加载完成

获取父元素

添加点击事件监听器

获取所有标签和内容项

移除所有active类

获取当前点击的标签的索引

添加active类

代码

<!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>
    .tab {
      width: 100%;
      height: 100%;
    }

    .tab-nav {
      width: 490px;
      height: 40px;
      background-color: #fff;
      border: 1px solid #020202;
      display: flex;
      align-items: center;
    }

    .tab-nav ul {
      list-style-type: none;
      padding-left: 0;
      margin: 0;
      display: flex;
    }

    .tab-nav ul li {
      margin-right: 20px;
      height: 40px;
      display: flex;
      align-items: center;
    }

    .tab-nav ul li a {
      text-decoration: none;
      color: inherit;
      padding: 0 10px;
    }

    .tab-nav ul li a:hover {
      color: red;
    }

    .tab-nav ul li:hover {
      background-color: gray;
    }

    .tab-nav h3 {
      margin-right: 20px;
      margin-left: 20px;
    }

    .tab-content {
      width: 450px;
      padding: 20px;
      border: 1px solid #020202;
      border-top: none;
      height: 300px;
      /* 增加高度以容纳更多内容 */
      overflow-y: auto;
      /* 添加滚动条 */
    }

    .tab-content .item {
      display: none;
      margin-bottom: 20px;
    }

    .tab-content .item.active {
      display: block;
    }

    .item h2 {
      color: #333;
    }

    .item p {
      color: #666;
    }

    .item img {
      max-width: 100%;
      height: auto;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div class="tab">
    <div class="tab-nav">
      <h3>每日特价</h3>
      <ul>
        <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">
        <h2>精选内容</h2>
        <p>这里是精选内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="精选图片">
      </div>
      <div class="item">
        <h2>美食内容</h2>
        <p>这里是美食内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="美食图片">
      </div>
      <div class="item">
        <h2>百货内容</h2>
        <p>这里是百货内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="百货图片">
      </div>
      <div class="item">
        <h2>母婴内容</h2>
        <p>这里是母婴内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="母婴图片">
      </div>
      <div class="item">
        <h2>图书内容</h2>
        <p>这里是图书内容的描述。</p>
        <img src="https://via.placeholder.com/150" alt="图书图片">
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tabNav = document.querySelector('.tab-nav ul');

      tabNav.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
          // 获取所有标签
          const tabs = document.querySelectorAll('.tab-nav ul li a');
          // 获取所有内容项
          const contents = document.querySelectorAll('.tab-content .item');

          // 移除所有标签的 active 类
          tabs.forEach(tab => tab.classList.remove('active'));
          // 移除所有内容项的 active 类
          contents.forEach(content => content.classList.remove('active'));

          // 获取当前点击的标签的索引
          const index = Array.from(tabs).indexOf(e.target);

          // 为当前点击的标签添加 active 类
          tabs[index].classList.add('active');
          // 为对应的内容项添加 active 类
          contents[index].classList.add('active');
        }
      });
    });
  </script>
</body>

</html>