当前位置：首页 > JavaScript

js实现tab页

2026-03-01 04:47:31JavaScript

实现Tab页的基本思路

使用JavaScript实现Tab页功能需要结合HTML结构和CSS样式，通过事件监听动态切换内容显示。核心逻辑是通过控制CSS类名或样式属性来切换不同标签页的显示状态。

HTML结构示例

<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 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>

CSS样式示例

.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;
}

JavaScript实现

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

  tabBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      // 移除所有按钮和面板的active类
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));

      // 添加active类到当前按钮
      this.classList.add('active');

      // 显示对应的面板
      const tabId = this.getAttribute('data-tab');
      document.getElementById(tabId).classList.add('active');
    });
  });
});

动态生成Tab页

如果需要动态生成Tab页内容，可以使用以下方法：

function createTab(tabData) {
  const tabsContainer = document.querySelector('.tabs');

  // 创建头部按钮
  const header = document.createElement('div');
  header.className = 'tab-header';

  tabData.forEach((tab, index) => {
    const btn = document.createElement('button');
    btn.className = `tab-btn ${index === 0 ? 'active' : ''}`;
    btn.textContent = tab.title;
    btn.setAttribute('data-tab', `tab-${index}`);
    header.appendChild(btn);
  });

  // 创建内容面板
  const content = document.createElement('div');
  content.className = 'tab-content';

  tabData.forEach((tab, index) => {
    const pane = document.createElement('div');
    pane.className = `tab-pane ${index === 0 ? 'active' : ''}`;
    pane.id = `tab-${index}`;
    pane.textContent = tab.content;
    content.appendChild(pane);
  });

  // 添加到容器
  tabsContainer.appendChild(header);
  tabsContainer.appendChild(content);

  // 添加事件监听
  addTabEvents();
}

使用事件委托优化性能

对于大量Tab页或动态内容，使用事件委托可以提高性能：

document.querySelector('.tabs').addEventListener('click', function(e) {
  if (e.target.classList.contains('tab-btn')) {
    // 移除所有active类
    document.querySelectorAll('.tab-btn.active').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-pane.active').forEach(pane => pane.classList.remove('active'));

    // 添加active类
    e.target.classList.add('active');
    const tabId = e.target.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  }
});