当前位置：首页 > JavaScript

tabs实现 js

2026-01-31 14:18:50JavaScript

使用 JavaScript 实现 Tabs 功能

通过 JavaScript 可以实现动态切换标签页的功能，以下是一个完整的实现方法。

HTML 结构

创建一个基本的 HTML 结构，包含标签按钮和对应的内容区域。

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

CSS 样式

添加基本样式，使标签页更具交互性。

tabs实现 js

.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.tab-btn {
  padding: 8px 16px;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
}

.tab-btn.active {
  background: #007bff;
  color: white;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}

.tab-content.active {
  display: block;
}

JavaScript 实现

使用 JavaScript 动态切换标签页内容。

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

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

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

使用事件委托优化性能

如果标签按钮是动态生成的，可以使用事件委托提高性能。

tabs实现 js

document.addEventListener('DOMContentLoaded', function() {
  const tabContainer = document.querySelector('.tab-buttons');
  const tabContents = document.querySelectorAll('.tab-content');

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

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

      // 激活当前按钮和内容
      e.target.classList.add('active');
      document.getElementById(tabId).classList.add('active');
    }
  });
});

使用 classList 切换状态

classList API 提供了更简洁的方式来操作 CSS 类，避免直接操作 className 字符串。

支持键盘导航

为提升可访问性，可以添加键盘支持。

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

  tabButtons.forEach(button => {
    button.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        button.click();
      }
    });
  });
});

动态加载内容

如果需要异步加载标签页内容，可以使用 fetch API。

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

  tabButtons.forEach(button => {
    button.addEventListener('click', async () => {
      const tabId = button.getAttribute('data-tab');
      const response = await fetch(`/api/content/${tabId}`);
      const content = await response.text();
      document.getElementById(tabId).innerHTML = content;
    });
  });
});