js实现tab选项卡

2026-04-04 08:09:33JavaScript

js实现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-contents">
    <div class="tab-content active" id="tab1">Content 1</div>
    <div class="tab-content" id="tab2">Content 2</div>
    <div class="tab-content" id="tab3">Content 3</div>
  </div>
</div>

CSS 样式

.tab-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.tab-buttons {
  display: flex;
  gap: 5px;
}
.tab-btn {
  padding: 10px 20px;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
}
.tab-btn.active {
  background: #ddd;
}
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}
.tab-content.active {
  display: block;
}

JavaScript 实现

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

  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      const tabId = button.getAttribute('data-tab');

      // 移除所有按钮和内容的 active 类
      tabButtons.forEach(btn => btn.classList.remove('active'));
      tabContents.forEach(content => content.classList.remove('active'));

      // 添加 active 类到当前按钮和内容
      button.classList.add('active');
      document.getElementById(tabId).classList.add('active');
    });
  });
});

实现说明

HTML 结构中 data-tab 属性用于关联按钮和内容
CSS 中通过 .active 类控制显示/隐藏状态
JavaScript 通过事件委托实现切换逻辑
默认显示第一个选项卡内容

扩展功能

// 添加新选项卡
function addNewTab(tabName, content) {
  const tabButtons = document.querySelector('.tab-buttons');
  const tabContents = document.querySelector('.tab-contents');

  const newBtn = document.createElement('button');
  newBtn.className = 'tab-btn';
  newBtn.textContent = tabName;
  newBtn.setAttribute('data-tab', `tab${Date.now()}`);

  const newContent = document.createElement('div');
  newContent.className = 'tab-content';
  newContent.id = newBtn.getAttribute('data-tab');
  newContent.textContent = content;

  tabButtons.appendChild(newBtn);
  tabContents.appendChild(newContent);

  // 为新按钮添加事件监听
  newBtn.addEventListener('click', function() {
    const tabId = this.getAttribute('data-tab');
    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
    this.classList.add('active');
    document.getElementById(tabId).classList.add('active');
  });
}

// 示例：添加新选项卡
addNewTab('New Tab', 'This is new tab content');