当前位置：首页 > CSS

css制作tab菜单

2026-01-08 18:44:22CSS

CSS制作Tab菜单的方法

HTML结构 使用无序列表和div容器构建基础结构，列表项为标签页标题，div内放置对应内容块。

<ul class="tab-menu">
  <li class="active">标签1</li>
  <li>标签2</li>
  <li>标签3</li>
</ul>
<div class="tab-content">
  <div class="active">内容1</div>
  <div>内容2</div>
  <div>内容3</div>
</div>

基础CSS样式 设置标签页横向排列，内容区域隐藏非激活状态元素。

.tab-menu {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #ddd;
}
.tab-menu li {
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
}
.tab-menu li.active {
  border-color: #ddd;
  border-bottom-color: white;
  margin-bottom: -1px;
}
.tab-content div {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  border-top: none;
}
.tab-content div.active {
  display: block;
}

悬停效果增强 为标签页添加鼠标悬停交互效果。

.tab-menu li:hover {
  background-color: #f5f5f5;
}

JavaScript交互控制 通过class切换实现标签页切换功能。

document.querySelectorAll('.tab-menu li').forEach(tab => {
  tab.addEventListener('click', () => {
    const index = Array.from(tab.parentNode.children).indexOf(tab);
    document.querySelector('.tab-menu .active').classList.remove('active');
    document.querySelector('.tab-content .active').classList.remove('active');
    tab.classList.add('active');
    document.querySelectorAll('.tab-content div')[index].classList.add('active');
  });
});

响应式设计 针对移动设备调整布局。

@media (max-width: 600px) {
  .tab-menu {
    flex-direction: column;
  }
  .tab-menu li {
    border-bottom: 1px solid #ddd;
  }
  .tab-menu li.active {
    border-bottom-color: white;
  }
}

动画过渡效果 为内容切换添加平滑过渡动画。

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

css制作tab菜单