js实现tap切换

实现Tap切换的基本思路

使用JavaScript实现Tap切换效果，可以通过监听点击事件动态切换内容显示。核心逻辑是隐藏所有内容面板，仅显示当前选中的Tap对应内容。

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-panel active" id="tab1">Content 1</div>
    <div class="tab-panel" id="tab2">Content 2</div>
    <div class="tab-panel" id="tab3">Content 3</div>
  </div>
</div>

CSS样式基础

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

.tab-btn.active {
  background: #ddd;
}

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

.tab-panel.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-panel').forEach(p => p.classList.remove('active'));

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

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

使用事件委托优化

对于动态添加的Tap或大量Tap，可以使用事件委托：

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

    // 激活当前
    e.target.classList.add('active');
    const tabId = e.target.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  }
});

添加过渡动画效果

通过CSS添加简单的淡入效果：

.tab-panel {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab-panel.active {
  opacity: 1;
}

支持键盘导航

增强可访问性，支持键盘操作：

tabBtns.forEach(btn => {
  btn.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      this.click();
    }
  });
});