js 实现tabs

2026-03-02 08:34:59JavaScript

JavaScript 实现 Tabs 功能

实现 Tabs（标签页）功能可以通过纯 JavaScript 完成，以下是核心实现步骤：

HTML 结构

<div class="tabs">
  <div class="tab-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="tab-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 样式

.tab-btn {
  padding: 10px 20px;
  background: #eee;
  border: none;
  cursor: pointer;
}
.tab-btn.active {
  background: #ddd;
}
.tab-panel {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}
.tab-panel.active {
  display: block;
}

JavaScript 逻辑

document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    // 移除所有按钮和面板的active类
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));

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

增强版实现（支持动态添加）

如果需要支持动态添加标签页，可以使用事件委托：

document.querySelector('.tab-header').addEventListener('click', (e) => {
  if (e.target.classList.contains('tab-btn')) {
    const tabId = e.target.getAttribute('data-tab');

    // 更新按钮状态
    document.querySelectorAll('.tab-btn').forEach(b => 
      b.classList.toggle('active', b === e.target)
    );

    // 更新内容面板
    document.querySelectorAll('.tab-panel').forEach(p => 
      p.classList.toggle('active', p.id === tabId)
    );
  }
});

注意事项

确保 data-tab 属性值与对应面板的 id 完全匹配
初始状态通过 active 类控制默认显示的标签页
可以通过 CSS 过渡效果增强切换动画
移动端适配可能需要调整点击区域大小

框架实现示例（Vue）

如果使用现代前端框架，实现会更简洁：

js 实现tabs

<!-- Vue 示例 -->
<div class="tabs">
  <div class="tab-header">
    <button 
      v-for="(tab, index) in tabs" 
      :key="index"
      @click="activeTab = index"
      :class="{ active: activeTab === index }"
    >
      {{ tab.title }}
    </button>
  </div>
  <div class="tab-content">
    <div 
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab-panel"
      :class="{ active: activeTab === index }"
    >
      {{ tab.content }}
    </div>
  </div>
</div>

new Vue({
  data: {
    activeTab: 0,
    tabs: [
      { title: 'Tab 1', content: 'Content 1' },
      { title: 'Tab 2', content: 'Content 2' },
      { title: 'Tab 3', content: 'Content 3' }
    ]
  }
});