tabs实现 js

使用 JavaScript 实现 Tabs 功能

方法 1：纯 JavaScript 实现

HTML 结构示例：

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

CSS 基础样式：

.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}
.tab-link.active {
  font-weight: bold;
}

JavaScript 实现：

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

  tabLinks.forEach(link => {
    link.addEventListener('click', function() {
      const tabId = this.getAttribute('data-tab');

      // 移除所有active类
      document.querySelectorAll('.tab-link').forEach(el => el.classList.remove('active'));
      document.querySelectorAll('.tab-pane').forEach(el => el.classList.remove('active'));

      // 添加active类到当前tab
      this.classList.add('active');
      document.getElementById(tabId).classList.add('active');
    });
  });
});

方法 2：使用事件委托优化

优化后的 JavaScript：

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

  tabsContainer.addEventListener('click', function(e) {
    if (e.target.classList.contains('tab-link')) {
      const tabId = e.target.getAttribute('data-tab');

      // 更新active状态
      document.querySelectorAll('.tab-link').forEach(el => el.classList.remove('active'));
      document.querySelectorAll('.tab-pane').forEach(el => el.classList.remove('active'));

      e.target.classList.add('active');
      document.getElementById(tabId).classList.add('active');
    }
  });
});

方法 3：支持键盘导航

增强可访问性的实现：

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

  tabs.forEach((tab, index) => {
    tab.addEventListener('keydown', function(e) {
      if (e.key === 'ArrowRight') {
        const nextTab = tabs[(index + 1) % tabs.length];
        nextTab.focus();
      } else if (e.key === 'ArrowLeft') {
        const prevTab = tabs[(index - 1 + tabs.length) % tabs.length];
        prevTab.focus();
      } else if (e.key === 'Home') {
        tabs[0].focus();
      } else if (e.key === 'End') {
        tabs[tabs.length - 1].focus();
      }
    });

    tab.addEventListener('click', function() {
      // 同方法1或2的实现
    });
  });
});

方法 4：使用 ES6 类封装

可复用的 Tab 组件：

class TabSystem {
  constructor(container) {
    this.container = container;
    this.tabLinks = this.container.querySelectorAll('.tab-link');
    this.tabPanes = this.container.querySelectorAll('.tab-pane');
    this.init();
  }

  init() {
    this.tabLinks.forEach(link => {
      link.addEventListener('click', () => this.switchTab(link));
    });
  }

  switchTab(activeLink) {
    const tabId = activeLink.getAttribute('data-tab');

    this.tabLinks.forEach(link => link.classList.remove('active'));
    this.tabPanes.forEach(pane => pane.classList.remove('active'));

    activeLink.classList.add('active');
    this.container.querySelector(`#${tabId}`).classList.add('active');
  }
}

// 使用方式
document.addEventListener('DOMContentLoaded', () => {
  const tabContainers = document.querySelectorAll('.tabs');
  tabContainers.forEach(container => new TabSystem(container));
});

这些方法提供了从基础到进阶的 JavaScript Tab 实现方案，可以根据项目需求选择适合的解决方案。