js 实现tab实现切换效果

使用HTML和CSS创建基础结构

在HTML中创建tab的容器和标签按钮，每个标签对应一个内容面板。基本结构如下：

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-button active" data-tab="tab1">Tab 1</button>
    <button class="tab-button" data-tab="tab2">Tab 2</button>
    <button class="tab-button" 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组件添加基本样式，确保非活动面板隐藏且活动状态可见：

.tab-container {
  width: 100%;
  max-width: 600px;
}
.tab-buttons {
  display: flex;
  gap: 5px;
}
.tab-button {
  padding: 10px 15px;
  background: #eee;
  border: none;
  cursor: pointer;
}
.tab-button.active {
  background: #ddd;
  font-weight: bold;
}
.tab-content {
  border: 1px solid #ddd;
  padding: 15px;
}
.tab-panel {
  display: none;
}
.tab-panel.active {
  display: block;
}

JavaScript实现切换逻辑

通过事件监听实现点击切换功能，注意处理active状态的切换：

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

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

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

动态生成Tab内容

如果需要从数据动态生成tab，可以使用以下方法：

const tabsData = [
  { id: 'tab1', label: 'Products', content: 'Product list here' },
  { id: 'tab2', label: 'Services', content: 'Service details' },
  { id: 'tab3', label: 'Contact', content: 'Contact form' }
];

function generateTabs() {
  const container = document.querySelector('.tab-container');

  // 生成按钮
  const buttons = document.createElement('div');
  buttons.className = 'tab-buttons';
  tabsData.forEach((tab, index) => {
    const button = document.createElement('button');
    button.className = `tab-button ${index === 0 ? 'active' : ''}`;
    button.textContent = tab.label;
    button.setAttribute('data-tab', tab.id);
    buttons.appendChild(button);
  });

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

  container.appendChild(buttons);
  container.appendChild(content);

  // 添加事件监听
  initTabEvents();
}

添加过渡动画效果

为切换过程添加平滑的淡入淡出效果，修改CSS如下：

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

响应式设计考虑

在小屏幕设备上，可以将tab按钮改为垂直排列：

@media (max-width: 600px) {
  .tab-buttons {
    flex-direction: column;
  }
}