js实现选项卡切换

实现选项卡切换的基本思路

选项卡切换通常通过监听点击事件，动态切换显示内容并更新样式。核心逻辑包括DOM操作、事件绑定和样式控制。

HTML结构示例

<div class="tab-container">
  <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-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 tabs = document.querySelectorAll('.tab-btn');
  const panes = document.querySelectorAll('.tab-pane');

  tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      // 移除所有按钮和面板的active类
      tabs.forEach(t => t.classList.remove('active'));
      panes.forEach(p => p.classList.remove('active'));

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

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

使用事件委托优化

对于动态生成的选项卡，可以使用事件委托：

document.querySelector('.tab-header').addEventListener('click', function(e) {
  if (e.target.classList.contains('tab-btn')) {
    const paneId = e.target.getAttribute('data-tab');

    // 更新按钮状态
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.classList.toggle('active', btn === e.target);
    });

    // 更新面板状态
    document.querySelectorAll('.tab-pane').forEach(pane => {
      pane.classList.toggle('active', pane.id === paneId);
    });
  }
});

支持键盘导航

为提升可访问性，可以添加键盘支持：

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

动画效果实现

为切换添加过渡动画：

.tab-pane {
  opacity: 0;
  transition: opacity 0.3s ease;
  height: 0;
  overflow: hidden;
}
.tab-pane.active {
  opacity: 1;
  height: auto;
}

封装为可复用组件

将功能封装为类：

class TabSwitcher {
  constructor(container) {
    this.container = container;
    this.init();
  }

  init() {
    this.buttons = this.container.querySelectorAll('.tab-btn');
    this.panes = this.container.querySelectorAll('.tab-pane');

    this.buttons.forEach(btn => {
      btn.addEventListener('click', () => this.switchTab(btn));
    });
  }

  switchTab(activeBtn) {
    // 更新按钮状态
    this.buttons.forEach(btn => {
      btn.classList.toggle('active', btn === activeBtn);
    });

    // 更新面板状态
    const paneId = activeBtn.getAttribute('data-tab');
    this.panes.forEach(pane => {
      pane.classList.toggle('active', pane.id === paneId);
    });
  }
}

// 初始化所有选项卡容器
document.querySelectorAll('.tab-container').forEach(container => {
  new TabSwitcher(container);
});