js实现选项卡

实现选项卡的基本思路

选项卡通常由多个标签页和对应的内容区域组成，点击不同标签页时显示对应的内容区域。实现的核心在于通过事件监听和CSS类控制内容的显示与隐藏。

HTML结构

构建基本的HTML结构，包含选项卡标签和内容区域：

<div class="tabs">
  <div class="tab-header">
    <div class="tab-item active" data-target="tab1">标签1</div>
    <div class="tab-item" data-target="tab2">标签2</div>
    <div class="tab-item" data-target="tab3">标签3</div>
  </div>
  <div class="tab-content">
    <div class="content-item active" id="tab1">内容1</div>
    <div class="content-item" id="tab2">内容2</div>
    <div class="content-item" id="tab3">内容3</div>
  </div>
</div>

CSS样式

添加基础样式控制选项卡的外观和交互效果：

.tab-header {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.tab-item {
  padding: 10px 20px;
  cursor: pointer;
}
.tab-item.active {
  background: #f0f0f0;
  border-bottom: 2px solid blue;
}
.content-item {
  display: none;
  padding: 20px;
}
.content-item.active {
  display: block;
}

JavaScript实现

通过JavaScript实现选项卡的切换功能：

document.addEventListener('DOMContentLoaded', function() {
  const tabItems = document.querySelectorAll('.tab-item');

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

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

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

动态生成选项卡

如果需要动态生成选项卡内容，可以通过以下方式实现：

const tabsData = [
  { title: '标签1', content: '内容1' },
  { title: '标签2', content: '内容2' },
  { title: '标签3', content: '内容3' }
];

function createTabs(containerId, data) {
  const container = document.getElementById(containerId);

  // 创建标签头
  const header = document.createElement('div');
  header.className = 'tab-header';

  // 创建内容区域
  const content = document.createElement('div');
  content.className = 'tab-content';

  data.forEach((tab, index) => {
    // 创建标签项
    const tabItem = document.createElement('div');
    tabItem.className = 'tab-item';
    tabItem.textContent = tab.title;
    tabItem.setAttribute('data-target', `tab-${index}`);
    if(index === 0) tabItem.classList.add('active');

    // 创建内容项
    const contentItem = document.createElement('div');
    contentItem.className = 'content-item';
    contentItem.id = `tab-${index}`;
    contentItem.textContent = tab.content;
    if(index === 0) contentItem.classList.add('active');

    header.appendChild(tabItem);
    content.appendChild(contentItem);
  });

  container.appendChild(header);
  container.appendChild(content);

  // 添加事件监听
  header.querySelectorAll('.tab-item').forEach(item => {
    item.addEventListener('click', function() {
      header.querySelectorAll('.tab-item').forEach(tab => {
        tab.classList.remove('active');
      });
      content.querySelectorAll('.content-item').forEach(content => {
        content.classList.remove('active');
      });

      this.classList.add('active');
      const targetId = this.getAttribute('data-target');
      document.getElementById(targetId).classList.add('active');
    });
  });
}

// 使用示例
createTabs('tabs-container', tabsData);

使用事件委托优化

对于大量选项卡，可以使用事件委托提高性能：

document.addEventListener('DOMContentLoaded', function() {
  const tabContainer = document.querySelector('.tabs');

  tabContainer.addEventListener('click', function(e) {
    if(e.target.classList.contains('tab-item')) {
      const tabItems = this.querySelectorAll('.tab-item');
      const contentItems = this.querySelectorAll('.content-item');

      tabItems.forEach(tab => tab.classList.remove('active'));
      contentItems.forEach(content => content.classList.remove('active'));

      e.target.classList.add('active');
      const targetId = e.target.getAttribute('data-target');
      document.getElementById(targetId).classList.add('active');
    }
  });
});

添加过渡动画

为选项卡切换添加平滑的过渡效果：

.content-item {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s, height 0.3s;
}
.content-item.active {
  opacity: 1;
  height: auto;
}

响应式设计考虑

确保选项卡在不同屏幕尺寸下都能良好显示：

@media (max-width: 768px) {
  .tab-header {
    flex-direction: column;
  }
  .tab-item {
    width: 100%;
  }
}