js 实现tab实现切换效果

2026-02-02 12:51:30JavaScript

使用HTML和CSS创建基本结构

创建一个包含多个标签页和对应内容的HTML结构，CSS用于控制标签页的样式和默认隐藏内容区域。

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

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

使用JavaScript实现切换逻辑

通过事件监听切换标签页，动态更新active类以显示对应内容。

document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    // 移除所有按钮和内容的active类
    document.querySelectorAll('.tab-btn, .tab-pane').forEach(el => {
      el.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')) {
    document.querySelectorAll('.tab-btn, .tab-pane').forEach(el => {
      el.classList.remove('active');
    });
    e.target.classList.add('active');
    const tabId = e.target.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  }
});

扩展功能：动画效果

通过CSS过渡或JavaScript为内容切换添加淡入淡出效果。

.tab-pane {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tab-pane.active {
  opacity: 1;
}

动态加载内容

通过fetch实现点击标签页时异步加载内容。

document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const tabId = btn.getAttribute('data-tab');
    fetch(`/api/content/${tabId}`)
      .then(response => response.text())
      .then(data => {
        document.getElementById(tabId).innerHTML = data;
        // 切换active类
        document.querySelectorAll('.tab-btn, .tab-pane').forEach(el => {
          el.classList.remove('active');
        });
        btn.classList.add('active');
        document.getElementById(tabId).classList.add('active');
      });
  });
});

js 实现tab实现切换效果