当前位置：首页 > JavaScript

js实现tab选项卡

2026-03-01 07:32:31JavaScript

实现Tab选项卡的基本思路

使用JavaScript实现Tab选项卡的核心逻辑是通过事件监听切换内容显示。通常需要操作DOM元素的classList来切换激活状态，并隐藏非当前选项卡的内容。

js实现tab选项卡

HTML结构示例

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">Tab 1</button>
    <button class="tab-btn" data-tab="tab2">Tab 2</button>
    <button class="tab-btn" 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-btn {
  padding: 10px 20px;
  background: #eee;
  border: none;
  cursor: pointer;
}

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

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

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

JavaScript实现代码

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

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      // 移除所有按钮和内容的active类
      document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
      });
      document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
      });

      // 为当前点击的按钮添加active类
      tab.classList.add('active');

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

进阶优化方案

添加过渡动画效果可以通过CSS实现：

js实现tab选项卡

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

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

支持键盘导航可增加无障碍访问：

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

动态加载内容版本

如果需要异步加载选项卡内容：

tab.addEventListener('click', async () => {
  const tabId = tab.getAttribute('data-tab');
  const response = await fetch(`/api/content/${tabId}`);
  const content = await response.text();
  document.getElementById(tabId).innerHTML = content;
});

以上实现方案涵盖了Tab选项卡的基本功能和常见扩展需求，可根据实际项目情况进行调整和扩展。