js实现标签页

实现标签页的基本思路

使用HTML、CSS和JavaScript创建一个标签页组件，通过点击不同标签切换显示对应的内容区域。

HTML结构

<div class="tabs">
  <div class="tab-header">
    <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样式

.tab-header {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.tab-btn.active {
  border-bottom: 2px solid #007bff;
  color: #007bff;
}

.tab-content {
  padding: 20px;
}

.tab-pane {
  display: none;
}

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

动态添加标签页

如果需要动态添加标签页，可以使用以下方法：

function addTab(tabTitle, tabContent) {
  const tabHeader = document.querySelector('.tab-header');
  const tabContentDiv = document.querySelector('.tab-content');

  // 创建新按钮
  const newBtn = document.createElement('button');
  newBtn.className = 'tab-btn';
  newBtn.textContent = tabTitle;
  const tabId = 'tab' + (document.querySelectorAll('.tab-btn').length + 1);
  newBtn.setAttribute('data-tab', tabId);

  // 创建新内容面板
  const newPane = document.createElement('div');
  newPane.className = 'tab-pane';
  newPane.id = tabId;
  newPane.textContent = tabContent;

  // 添加到DOM
  tabHeader.appendChild(newBtn);
  tabContentDiv.appendChild(newPane);

  // 为新按钮添加事件监听
  newBtn.addEventListener('click', function() {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));

    this.classList.add('active');
    document.getElementById(tabId).classList.add('active');
  });
}

使用示例

// 添加新标签页
addTab('新标签', '这是动态添加的内容');

注意事项

• 确保CSS中的选择器与HTML结构匹配
• 动态添加标签页时要注意ID的唯一性
• 可以根据需要调整样式和动画效果
• 考虑添加键盘导航功能提升可访问性