js自定义Tab选项卡效果

来一份完整的 “JS 自定义 Tab 选项卡效果” 的攻略吧。

1. 确定需求及基本思路

在实现一个自定义的 Tab 选项卡效果时，我们需要先理解需求和基本思路。

需求

根据用户的操作显示不同的内容区域；
点击不同的选项卡可以显示对应的内容区域；
选项卡可以自定义样式（如背景颜色、字体颜色等）。

基本思路

使用 HTML 和 CSS 构建选项卡和内容区域；
使用 JavaScript 添加事件监听器，当用户点击选项卡时，显示对应的内容区域。

2. HTML 结构

先来看一下 HTML 结构：

<div class="tab-container">
  <div class="tab-header">
    <span class="tab-item active">选项卡1</span>
    <span class="tab-item">选项卡2</span>
    <span class="tab-item">选项卡3</span>
  </div>
  <div class="tab-body">
    <div class="tab-panel active">内容1</div>
    <div class="tab-panel">内容2</div>
    <div class="tab-panel">内容3</div>
  </div>
</div>

其中，.tab-header 是选项卡容器，.tab-item 是选项卡，.tab-body 是内容容器，.tab-panel 是内容区域。

默认情况下，第一个选项卡和对应的内容区域应该是激活状态的，所以我们给它们添加 .active 类。

3. CSS 样式

对于 CSS 样式，可以根据自己的需求进行自定义，这里只给一个简单的样式：

.tab-item {
  padding: 10px 20px;
  background-color: #ccc;
  border: 1px solid #999;
  cursor: pointer;
  user-select: none;
}

.tab-item.active {
  background-color: #f60;
  color: #fff;
}

.tab-panel {
  padding: 20px;
  border: 1px solid #999;
}

.tab-panel.active {
  display: block;
}

.tab-panel {
  display: none;
}

4. JavaScript 逻辑

有了 HTML 和 CSS 的基础，接下来就是 JavaScript 的逻辑代码了。

4.1 获取 DOM 元素并添加事件监听器

// 获取 DOM 元素
const tabs = document.querySelectorAll('.tab-item');
const panels = document.querySelectorAll('.tab-panel');

// 添加事件监听器
tabs.forEach((tab, index) => {
  tab.addEventListener('click', (e) => {
    e.preventDefault();
    // 切换选项卡和内容区域的状态
    toggleTab(index);
  });
});

首先获取所有的选项卡和内容区域，然后对每个选项卡添加一个点击事件监听器，当用户点击选项卡时，会触发该事件监听器。

4.2 切换选项卡和内容区域的状态

function toggleTab(index) {
  // 切换选项卡的状态
  tabs.forEach((tab, idx) => {
    if (idx === index) {
      tab.classList.add('active');
    } else {
      tab.classList.remove('active');
    }
  });

  // 切换内容区域的状态
  panels.forEach((panel, idx) => {
    if (idx === index) {
      panel.classList.add('active');
    } else {
      panel.classList.remove('active');
    }
  });
}

当用户点击选项卡时，该函数会被触发，它会根据选项卡的索引值，切换选项卡和内容区域的状态。

具体来说，它会从所有选项卡中找到索引值等于点击的选项卡索引值的选项卡，并给它添加 .active 类；同时，它会从所有内容区域中找到索引值等于点击的选项卡索引值的内容区域，并给它添加 .active 类。

4.3 初始化状态

function initTab() {
  // 默认激活第一个选项卡和内容区域
  tabs[0].classList.add('active');
  panels[0].classList.add('active');
}

在页面加载完成后，需要默认激活第一个选项卡和内容区域。

5. 示例说明

示例 1

下面是一个简单的示例，实现了一个基本的 Tab 选项卡效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tab 选项卡示例 1</title>
    <style>
      /* CSS 样式 */
      .tab-item {
        padding: 10px 20px;
        background-color: #ccc;
        border: 1px solid #999;
        cursor: pointer;
        user-select: none;
      }

      .tab-item.active {
        background-color: #f60;
        color: #fff;
      }

      .tab-panel {
        padding: 20px;
        border: 1px solid #999;
      }

      .tab-panel.active {
        display: block;
      }

      .tab-panel {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="tab-container">
      <div class="tab-header">
        <span class="tab-item active">选项卡1</span>
        <span class="tab-item">选项卡2</span>
        <span class="tab-item">选项卡3</span>
      </div>
      <div class="tab-body">
        <div class="tab-panel active">内容1</div>
        <div class="tab-panel">内容2</div>
        <div class="tab-panel">内容3</div>
      </div>
    </div>

    <script>
      // JavaScript 逻辑
      const tabs = document.querySelectorAll('.tab-item');
      const panels = document.querySelectorAll('.tab-panel');

      function toggleTab(index) {
        tabs.forEach((tab, idx) => {
          if (idx === index) {
            tab.classList.add('active');
          } else {
            tab.classList.remove('active');
          }
        });

        panels.forEach((panel, idx) => {
          if (idx === index) {
            panel.classList.add('active');
          } else {
            panel.classList.remove('active');
          }
        });
      }

      tabs.forEach((tab, index) => {
        tab.addEventListener('click', (e) => {
          e.preventDefault();
          toggleTab(index);
        });
      });

      // 初始化状态
      tabs[0].classList.add('active');
      panels[0].classList.add('active');
    </script>
  </body>
</html>

运行该示例，可以看到基本的 Tab 选项卡效果已经实现。

示例 2

下面是一个稍微复杂一些的示例，实现了一个带有自定义样式的 Tab 选项卡效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tab 选项卡示例 2</title>
    <style>
      /* CSS 样式 */
      .custom-tab-container {
        font-family: Arial, sans-serif;
        font-size: 16px;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      }

      .custom-tab-header {
        display: flex;
        justify-content: space-between;
        background-color: #f60;
        border-radius: 5px;
        overflow: hidden;
      }

      .custom-tab-item {
        flex: 1;
        padding: 10px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        user-select: none;
      }

      .custom-tab-item.active {
        background-color: #fff;
        color: #f60;
      }

      .custom-tab-panel {
        padding: 20px;
        border: 1px solid #999;
        background-color: #fff;
      }

      .custom-tab-panel.active {
        display: block;
      }

      .custom-tab-panel {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="custom-tab-container">
      <div class="custom-tab-header">
        <span class="custom-tab-item active">选项卡1</span>
        <span class="custom-tab-item">选项卡2</span>
        <span class="custom-tab-item">选项卡3</span>
      </div>
      <div class="custom-tab-body">
        <div class="custom-tab-panel active">内容1</div>
        <div class="custom-tab-panel">内容2</div>
        <div class="custom-tab-panel">内容3</div>
      </div>
    </div>

    <script>
      // JavaScript 逻辑
      const tabs = document.querySelectorAll('.custom-tab-item');
      const panels = document.querySelectorAll('.custom-tab-panel');

      function toggleTab(index) {
        tabs.forEach((tab, idx) => {
          if (idx === index) {
            tab.classList.add('active');
          } else {
            tab.classList.remove('active');
          }
        });

        panels.forEach((panel, idx) => {
          if (idx === index) {
            panel.classList.add('active');
          } else {
            panel.classList.remove('active');
          }
        });
      }

      tabs.forEach((tab, index) => {
        tab.addEventListener('click', (e) => {
          e.preventDefault();
          toggleTab(index);
        });
      });

      // 初始化状态
      tabs[0].classList.add('active');
      panels[0].classList.add('active');
    </script>
  </body>
</html>

运行该示例，可以看到一个带有自定义样式的 Tab 选项卡效果已经实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js自定义Tab选项卡效果 - Python技术站