js实现tab页

实现 Tab 页的基本思路

Tab 页的核心逻辑是通过切换显示不同的内容区域，同时高亮当前选中的标签。通常需要 HTML 结构、CSS 样式和 JavaScript 交互逻辑配合完成。

HTML 结构

基础的 Tab 页 HTML 结构包含标签导航和内容区域两部分：

<div class="tabs">
  <div class="tab-nav">
    <button class="tab-btn active" data-target="tab1">Tab 1</button>
    <button class="tab-btn" data-target="tab2">Tab 2</button>
    <button class="tab-btn" data-target="tab3">Tab 3</button>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">Content 1</div>
    <div id="tab2" class="tab-pane">Content 2</div>
    <div id="tab3" class="tab-pane">Content 3</div>
  </div>
</div>

CSS 样式

基础样式确保默认隐藏非活动内容，并高亮当前标签：

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

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

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

JavaScript 实现

通过事件监听实现标签切换功能：

document.querySelectorAll('.tab-btn').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 targetId = this.getAttribute('data-target');
    document.getElementById(targetId).classList.add('active');
  });
});

动态添加 Tab 页

支持动态添加新 Tab 的功能：

function addNewTab(title, content) {
  const tabId = 'tab' + (document.querySelectorAll('.tab-btn').length + 1);

  // 创建新按钮
  const newBtn = document.createElement('button');
  newBtn.className = 'tab-btn';
  newBtn.textContent = title;
  newBtn.setAttribute('data-target', tabId);

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

  // 添加到DOM
  document.querySelector('.tab-nav').appendChild(newBtn);
  document.querySelector('.tab-content').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');
  });
}

支持键盘导航

增强可访问性，添加键盘支持：

document.querySelector('.tab-nav').addEventListener('keydown', function(e) {
  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
    const tabs = Array.from(document.querySelectorAll('.tab-btn'));
    const currentIndex = tabs.findIndex(tab => tab.classList.contains('active'));

    let newIndex;
    if (e.key === 'ArrowLeft') {
      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
    } else {
      newIndex = (currentIndex + 1) % tabs.length;
    }

    tabs[currentIndex].classList.remove('active');
    tabs[newIndex].classList.add('active');
    tabs[newIndex].focus();

    const targetId = tabs[newIndex].getAttribute('data-target');
    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
    document.getElementById(targetId).classList.add('active');
  }
});

使用 classList 优化

更现代的 class 操作方法：

function switchTab(btn) {
  // 获取所有相关元素
  const tabs = document.querySelectorAll('.tab-btn');
  const panes = document.querySelectorAll('.tab-pane');
  const target = document.getElementById(btn.dataset.target);

  // 使用classList操作
  tabs.forEach(t => t.classList.remove('active'));
  panes.forEach(p => p.classList.remove('active'));

  btn.classList.add('active');
  target.classList.add('active');
}

性能优化建议

对于大量 Tab 的情况，可以考虑事件委托：

document.querySelector('.tab-nav').addEventListener('click', function(e) {
  if (e.target.classList.contains('tab-btn')) {
    switchTab(e.target);
  }
});

响应式设计考虑

添加媒体查询适应不同屏幕尺寸：

@media (max-width: 600px) {
  .tab-nav {
    display: flex;
    flex-direction: column;
  }
  .tab-btn {
    width: 100%;
    margin-bottom: 5px;
  }
}

以上实现提供了 Tab 页的基本功能，可以根据具体需求进行扩展和定制。