js 实现tab

实现 Tab 切换功能

使用 JavaScript 实现 Tab 切换功能可以通过监听点击事件，动态切换内容的显示与隐藏。以下是完整的实现方法：

HTML 结构

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">Tab 1</button>
    <button class="tab-btn" data-tab="tab2">Tab 2</button>
    <button class="tab-btn" data-tab="tab3">Tab 3</button>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">Content for Tab 1</div>
    <div class="tab-pane" id="tab2">Content for Tab 2</div>
    <div class="tab-pane" id="tab3">Content for Tab 3</div>
  </div>
</div>

CSS 样式

.tab-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.tab-buttons {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.tab-btn {
  padding: 10px 20px;
  background: #f1f1f1;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.tab-btn.active {
  background: #ddd;
  font-weight: bold;
}

.tab-content {
  padding: 20px;
}

.tab-pane {
  display: none;
}

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

JavaScript 实现

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');

  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      // 移除所有按钮的 active 类
      tabButtons.forEach(btn => btn.classList.remove('active'));

      // 为当前点击的按钮添加 active 类
      this.classList.add('active');

      // 获取关联的 tab 内容 ID
      const tabId = this.getAttribute('data-tab');

      // 隐藏所有内容面板
      document.querySelectorAll('.tab-pane').forEach(pane => {
        pane.classList.remove('active');
      });

      // 显示当前选中的内容面板
      document.getElementById(tabId).classList.add('active');
    });
  });
});

使用事件委托优化

对于大量 Tab 或动态生成的 Tab，可以使用事件委托提高性能：

document.addEventListener('DOMContentLoaded', function() {
  const tabContainer = document.querySelector('.tab-container');

  tabContainer.addEventListener('click', function(e) {
    if (e.target.classList.contains('tab-btn')) {
      const tabButtons = document.querySelectorAll('.tab-btn');
      tabButtons.forEach(btn => btn.classList.remove('active'));
      e.target.classList.add('active');

      const tabId = e.target.getAttribute('data-tab');
      document.querySelectorAll('.tab-pane').forEach(pane => {
        pane.classList.remove('active');
      });
      document.getElementById(tabId).classList.add('active');
    }
  });
});

添加动画效果

可以为 Tab 切换添加淡入淡出动画效果：

.tab-pane {
  opacity: 0;
  transition: opacity 0.3s ease;
  height: 0;
  overflow: hidden;
}

.tab-pane.active {
  opacity: 1;
  height: auto;
}

响应式 Tab 实现

对于移动设备，可以将 Tab 改为垂直布局：

@media (max-width: 768px) {
  .tab-buttons {
    flex-direction: column;
  }
}

这种方法提供了基本的 Tab 功能实现，可以根据具体需求进行调整和扩展。