当前位置：首页 > JavaScript

js实现标签切换

2026-04-04 02:48:14JavaScript

实现标签切换的 JavaScript 方法

HTML 结构示例
创建一个包含标签按钮和对应内容的容器：

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">标签1</button>
    <button class="tab-btn" data-tab="tab2">标签2</button>
    <button class="tab-btn" data-tab="tab3">标签3</button>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">内容1</div>
    <div class="tab-pane" id="tab2">内容2</div>
    <div class="tab-pane" id="tab3">内容3</div>
  </div>
</div>

CSS 基础样式
隐藏非活动标签内容并设置活动状态样式：

js实现标签切换

.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}
.tab-btn.active {
  background-color: #ddd;
}

JavaScript 核心逻辑
通过事件委托实现切换功能：

js实现标签切换

document.querySelector('.tab-buttons').addEventListener('click', (e) => {
  if (e.target.classList.contains('tab-btn')) {
    // 移除所有按钮和内容的 active 类
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.classList.remove('active');
    });
    document.querySelectorAll('.tab-pane').forEach(pane => {
      pane.classList.remove('active');
    });

    // 激活当前点击的标签和对应内容
    e.target.classList.add('active');
    const tabId = e.target.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  }
});

使用 classList 的优化版本

更简洁的类名切换方式：

const tabs = document.querySelectorAll('.tab-btn');
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const target = document.getElementById(tab.dataset.tab);
    document.querySelector('.tab-btn.active').classList.remove('active');
    document.querySelector('.tab-pane.active').classList.remove('active');
    tab.classList.add('active');
    target.classList.add('active');
  });
});

动态生成标签页的实现

适用于数据驱动的场景：

const tabData = [
  { id: 'news', label: '新闻', content: '最新新闻内容' },
  { id: 'sports', label: '体育', content: '体育赛事报道' }
];

function renderTabs() {
  const container = document.getElementById('tab-container');
  let buttons = '';
  let contents = '';

  tabData.forEach((tab, index) => {
    buttons += `<button class="tab-btn ${index === 0 ? 'active' : ''}" 
               data-tab="${tab.id}">${tab.label}</button>`;
    contents += `<div class="tab-pane ${index === 0 ? 'active' : ''}" 
               id="${tab.id}">${tab.content}</div>`;
  });

  container.innerHTML = `
    <div class="tab-buttons">${buttons}</div>
    <div class="tab-content">${contents}</div>
  `;
}