js 实现tab实现切换效果

使用HTML和CSS构建基础结构

<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 1</div>
    <div class="tab-pane" id="tab2">Content 2</div>
    <div class="tab-pane" id="tab3">Content 3</div>
  </div>
</div>

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

通过事件委托实现切换逻辑

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

    // 移除所有按钮和内容面板的active类
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.classList.remove('active');
    });
    document.querySelectorAll('.tab-pane').forEach(pane => {
      pane.classList.remove('active');
    });

    // 为当前点击的按钮和对应内容面板添加active类
    e.target.classList.add('active');
    document.getElementById(tabId).classList.add('active');
  }
});

使用classList API优化性能

const tabButtons = document.querySelector('.tab-buttons');
const tabs = document.querySelectorAll('.tab-btn');
const panes = document.querySelectorAll('.tab-pane');

tabButtons.addEventListener('click', (e) => {
  const targetBtn = e.target.closest('.tab-btn');
  if (!targetBtn) return;

  tabs.forEach(tab => tab.classList.toggle('active', tab === targetBtn));
  panes.forEach(pane => {
    pane.classList.toggle('active', pane.id === targetBtn.dataset.tab);
  });
});

添加过渡动画效果

.tab-pane {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s, height 0.3s;
}
.tab-pane.active {
  opacity: 1;
  height: auto;
}

支持键盘导航

tabButtons.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
    const currentTab = document.querySelector('.tab-btn.active');
    const tabsArray = Array.from(tabs);
    let index = tabsArray.indexOf(currentTab);

    if (e.key === 'ArrowLeft') index = (index - 1 + tabs.length) % tabs.length;
    if (e.key === 'ArrowRight') index = (index + 1) % tabs.length;

    tabsArray[index].click();
    tabsArray[index].focus();
  }
});