js实现tab栏目

2026-03-16 02:32:58JavaScript

使用HTML和CSS构建基础结构

HTML部分需要创建tab的标题和内容容器。通常使用ul列表作为tab标题，div作为内容容器。

<div class="tab-container">
  <ul class="tab-header">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
  </ul>
  <div class="tab-content">
    <div class="active">Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
  </div>
</div>

CSS部分设置基本样式，隐藏非活动内容，突出显示活动tab。

.tab-header {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-header li {
  padding: 10px 20px;
  cursor: pointer;
  background: #eee;
}
.tab-header li.active {
  background: #fff;
  border-bottom: 2px solid #007bff;
}
.tab-content div {
  display: none;
  padding: 20px;
}
.tab-content div.active {
  display: block;
}

使用JavaScript实现切换功能

通过事件监听实现tab切换逻辑。获取所有tab标题和内容元素，点击时切换active类。

document.addEventListener('DOMContentLoaded', function() {
  const headers = document.querySelectorAll('.tab-header li');
  const contents = document.querySelectorAll('.tab-content div');

  headers.forEach((header, index) => {
    header.addEventListener('click', () => {
      // 移除所有active类
      headers.forEach(h => h.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));

      // 添加当前active类
      header.classList.add('active');
      contents[index].classList.add('active');
    });
  });
});

添加过渡动画效果

通过CSS过渡属性让内容切换更平滑。修改CSS内容部分添加过渡效果。

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

响应式设计考虑

针对移动设备调整tab布局，可能需要将水平tab改为垂直排列。

@media (max-width: 768px) {
  .tab-header {
    flex-direction: column;
  }
  .tab-header li.active {
    border-bottom: none;
    border-left: 2px solid #007bff;
  }
}

动态加载内容

如果需要异步加载tab内容，可以修改点击事件处理函数。

js实现tab栏目

header.addEventListener('click', () => {
  if (!header.dataset.loaded) {
    fetch(`/api/content/${index}`)
      .then(response => response.text())
      .then(data => {
        contents[index].innerHTML = data;
        header.dataset.loaded = true;
      });
  }
});