js实现选项卡切换

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

选项卡切换通常通过监听点击事件动态切换内容显示状态。核心逻辑是点击选项卡标题时隐藏所有内容面板，仅显示对应面板。

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

CSS样式准备

.tab-panel {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}
.tab-panel.active {
  display: block;
}
.tab-btn.active {
  background-color: #007bff;
  color: white;
}

JavaScript实现方式

方法一：基础DOM操作

const tabs = document.querySelectorAll('.tab-btn');
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有按钮和面板的active类
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.classList.remove('active');
    });
    document.querySelectorAll('.tab-panel').forEach(panel => {
      panel.classList.remove('active');
    });

    // 添加active类到当前元素
    tab.classList.add('active');
    const panelId = tab.getAttribute('data-tab');
    document.getElementById(panelId).classList.add('active');
  });
});

方法二：事件委托优化

document.querySelector('.tab-header').addEventListener('click', (e) => {
  if (e.target.classList.contains('tab-btn')) {
    const tabId = e.target.getAttribute('data-tab');
    // 更新按钮状态
    document.querySelectorAll('.tab-btn').forEach(btn => {
      btn.classList.toggle('active', btn === e.target);
    });
    // 更新内容面板
    document.querySelectorAll('.tab-panel').forEach(panel => {
      panel.classList.toggle('active', panel.id === tabId);
    });
  }
});

动态生成选项卡的实现

function createTabs(tabData) {
  const container = document.createElement('div');
  container.className = 'tab-container';

  // 生成标题栏
  const header = document.createElement('div');
  header.className = 'tab-header';
  tabData.forEach((tab, index) => {
    const btn = document.createElement('button');
    btn.className = `tab-btn ${index === 0 ? 'active' : ''}`;
    btn.textContent = tab.title;
    btn.dataset.tab = `tab-${index}`;
    header.appendChild(btn);
  });

  // 生成内容区
  const content = document.createElement('div');
  content.className = 'tab-content';
  tabData.forEach((tab, index) => {
    const panel = document.createElement('div');
    panel.className = `tab-panel ${index === 0 ? 'active' : ''}`;
    panel.id = `tab-${index}`;
    panel.innerHTML = tab.content;
    content.appendChild(panel);
  });

  container.append(header, content);
  return container;
}

添加过渡动画效果

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

注意事项

• 确保初始状态有默认显示的选项卡
• 考虑无障碍访问，可添加ARIA属性
• 移动端可能需要额外的触摸事件支持
• 动态加载内容时注意性能优化