当前位置：首页 > JavaScript

js 实现tab

2026-03-13 23:24:36JavaScript

使用纯JavaScript实现Tab切换功能

通过DOM操作和事件监听实现基础的Tab切换效果，无需依赖任何库。

// 获取所有tab标签和内容区域
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

// 为每个tab添加点击事件
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有active类
    tabs.forEach(t => t.classList.remove('active'));
    tabContents.forEach(c => c.classList.remove('active'));

    // 添加active类到当前tab和对应内容
    tab.classList.add('active');
    const targetId = tab.getAttribute('data-target');
    document.getElementById(targetId).classList.add('active');
  });
});

添加CSS样式配合Tab效果

基础样式确保Tab切换时的视觉反馈。

.tab {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  background: #f1f1f1;
}

.tab.active {
  background: #ddd;
  font-weight: bold;
}

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

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

HTML结构示例

对应JavaScript和CSS的HTML基础结构。

<div class="tabs">
  <div class="tab active" data-target="content1">Tab 1</div>
  <div class="tab" data-target="content2">Tab 2</div>
  <div class="tab" data-target="content3">Tab 3</div>
</div>

<div id="content1" class="tab-content active">Content 1</div>
<div id="content2" class="tab-content">Content 2</div>
<div id="content3" class="tab-content">Content 3</div>

使用classList API优化

现代浏览器支持的classList方法比className操作更简洁可靠。

// 切换active类更安全的方式
element.classList.toggle('active');
element.classList.contains('active');

添加过渡动画效果

通过CSS transition让Tab切换更平滑。

.tab-content {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab-content.active {
  opacity: 1;
}

支持键盘导航

为可访问性添加键盘操作支持。

js 实现tab

tabs.forEach(tab => {
  tab.setAttribute('tabindex', '0');
  tab.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      tab.click();
    }
  });
});