js实现tab选项卡

实现Tab选项卡的基本结构

使用HTML创建Tab选项卡的基本结构，包含选项卡标题和内容区域。每个选项卡对应一个内容面板，通过data-tab属性关联。

<div class="tabs">
  <div class="tab-headers">
    <button class="tab-header active" data-tab="tab1">Tab 1</button>
    <button class="tab-header" data-tab="tab2">Tab 2</button>
    <button class="tab-header" data-tab="tab3">Tab 3</button>
  </div>
  <div class="tab-contents">
    <div class="tab-content active" id="tab1">Content 1</div>
    <div class="tab-content" id="tab2">Content 2</div>
    <div class="tab-content" id="tab3">Content 3</div>
  </div>
</div>

添加CSS样式

为Tab选项卡添加基础样式，包括标题和内容区域的布局。使用active类控制当前显示的选项卡。

.tab-headers {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

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

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

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

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

JavaScript实现切换逻辑

通过JavaScript监听选项卡标题的点击事件，切换显示对应的内容面板。使用classList操作DOM元素的active类。

document.querySelectorAll('.tab-header').forEach(header => {
  header.addEventListener('click', () => {
    // 移除所有标题和内容的active类
    document.querySelectorAll('.tab-header, .tab-content').forEach(el => {
      el.classList.remove('active');
    });

    // 为当前点击的标题添加active类
    header.classList.add('active');

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

动态生成Tab选项卡

如果需要动态生成Tab选项卡，可以通过JavaScript创建DOM元素并插入页面。使用数组或对象存储选项卡数据。

const tabsData = [
  { id: 'tab1', title: 'Tab 1', content: 'Content 1' },
  { id: 'tab2', title: 'Tab 2', content: 'Content 2' },
  { id: 'tab3', title: 'Tab 3', content: 'Content 3' }
];

const tabsContainer = document.createElement('div');
tabsContainer.className = 'tabs';

const headersContainer = document.createElement('div');
headersContainer.className = 'tab-headers';

const contentsContainer = document.createElement('div');
contentsContainer.className = 'tab-contents';

tabsData.forEach((tab, index) => {
  const header = document.createElement('button');
  header.className = `tab-header ${index === 0 ? 'active' : ''}`;
  header.setAttribute('data-tab', tab.id);
  header.textContent = tab.title;
  headersContainer.appendChild(header);

  const content = document.createElement('div');
  content.className = `tab-content ${index === 0 ? 'active' : ''}`;
  content.id = tab.id;
  content.textContent = tab.content;
  contentsContainer.appendChild(content);
});

tabsContainer.appendChild(headersContainer);
tabsContainer.appendChild(contentsContainer);
document.body.appendChild(tabsContainer);

添加过渡动画效果

通过CSS过渡属性为选项卡切换添加平滑的动画效果。使用opacity和transform实现淡入淡出效果。

.tab-content {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tab-content.active {
  opacity: 1;
  transform: translateY(0);
}

响应式设计调整

针对不同屏幕尺寸调整Tab选项卡的布局。在小屏幕上将选项卡标题改为垂直排列。

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