js 实现tabs

使用纯 JavaScript 实现 Tabs

以下是实现基础 Tabs 功能的完整代码示例，包含 HTML 结构、CSS 样式和 JavaScript 交互逻辑。

HTML 结构

<div class="tabs">
  <div class="tabs-header">
    <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="tabs-content">
    <div class="tab-panel active" id="tab1">Content 1</div>
    <div class="tab-panel" id="tab2">Content 2</div>
    <div class="tab-panel" id="tab3">Content 3</div>
  </div>
</div>

CSS 样式

.tabs-header {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.tab-btn.active {
  border-bottom: 2px solid #007bff;
}

.tab-panel {
  display: none;
  padding: 20px;
}

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

JavaScript 实现

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

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

      // 为当前按钮和对应面板添加active类
      button.classList.add('active');
      const panelId = button.getAttribute('data-tab');
      document.getElementById(panelId).classList.add('active');
    });
  });
});

使用事件委托优化

对于动态添加的 tabs 或大量 tabs，可以使用事件委托提高性能：

document.addEventListener('DOMContentLoaded', function() {
  const tabsContainer = document.querySelector('.tabs-header');
  const tabPanels = document.querySelectorAll('.tab-panel');

  tabsContainer.addEventListener('click', (e) => {
    if (e.target.classList.contains('tab-btn')) {
      // 移除所有active类
      document.querySelectorAll('.tab-btn.active').forEach(btn => {
        btn.classList.remove('active');
      });
      tabPanels.forEach(panel => panel.classList.remove('active'));

      // 设置当前active
      e.target.classList.add('active');
      const panelId = e.target.getAttribute('data-tab');
      document.getElementById(panelId).classList.add('active');
    }
  });
});

添加过渡动画效果

可以通过 CSS 为 tabs 切换添加平滑的过渡效果：

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

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

响应式 Tabs 实现

对于移动设备，可以将 tabs 转换为下拉菜单：

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

  .tab-btn {
    text-align: left;
  }
}

可复用组件实现

创建一个可复用的 Tabs 类：

class Tabs {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.buttons = this.container.querySelectorAll('.tab-btn');
    this.panels = this.container.querySelectorAll('.tab-panel');

    this.init();
  }

  init() {
    this.buttons.forEach(button => {
      button.addEventListener('click', () => this.switchTab(button));
    });
  }

  switchTab(button) {
    this.buttons.forEach(btn => btn.classList.remove('active'));
    this.panels.forEach(panel => panel.classList.remove('active'));

    button.classList.add('active');
    const panelId = button.getAttribute('data-tab');
    document.getElementById(panelId).classList.add('active');
  }
}

// 使用示例
new Tabs('tabs-container');

以上实现涵盖了从基础到进阶的 Tabs 功能，可以根据项目需求选择适合的实现方式。