当前位置：首页 > JavaScript

js实现tab选项卡切换

2026-01-13 14:27:20JavaScript

实现Tab选项卡切换的JavaScript方法

使用纯JavaScript实现Tab切换功能，可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式：

基础DOM操作实现

// 获取所有tab标签和内容面板
const tabs = document.querySelectorAll('.tab');
const panels = document.querySelectorAll('.panel');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有active类
    tabs.forEach(t => t.classList.remove('active'));
    panels.forEach(p => p.classList.remove('active'));

    // 添加active类到当前tab和对应panel
    tab.classList.add('active');
    const panelId = tab.getAttribute('data-target');
    document.getElementById(panelId).classList.add('active');
  });
});

使用事件委托优化

document.querySelector('.tab-container').addEventListener('click', (e) => {
  if (e.target.classList.contains('tab')) {
    const tab = e.target;
    const allTabs = tab.parentElement.children;
    const panelId = tab.dataset.target;

    Array.from(allTabs).forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));

    tab.classList.add('active');
    document.getElementById(panelId).classList.add('active');
  }
});

配套HTML结构示例

<div class="tab-container">
  <div class="tab active" data-target="panel1">Tab 1</div>
  <div class="tab" data-target="panel2">Tab 2</div>
  <div class="tab" data-target="panel3">Tab 3</div>
</div>

<div class="panel active" id="panel1">Content 1</div>
<div class="panel" id="panel2">Content 2</div>
<div class="panel" id="panel3">Content 3</div>

配套CSS样式建议

.tab-container {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.tab {
  padding: 10px 20px;
  cursor: pointer;
}
.tab.active {
  background: #fff;
  border-bottom: 2px solid #007bff;
}
.panel {
  display: none;
  padding: 20px;
}
.panel.active {
  display: block;
}

动画效果增强

为切换添加过渡动画可提升用户体验：

// 在切换active类之前添加
panels.forEach(panel => {
  panel.style.opacity = '0';
  setTimeout(() => {
    panel.style.transition = 'opacity 0.3s ease';
  }, 0);
});

// 在active类添加后
setTimeout(() => {
  document.getElementById(panelId).style.opacity = '1';
}, 10);