当前位置：首页 > CSS

css制作tab菜单

2026-02-26 23:28:22CSS

使用纯CSS制作Tab菜单

通过CSS的:target伪类或:checked伪类结合相邻兄弟选择器，可以实现无JavaScript的Tab切换效果。以下是两种常见实现方式：

方法一：基于`:target`伪类

HTML结构：

<div class="tab-container">
  <nav class="tab-nav">
    <a href="#tab1">Tab 1</a>
    <a href="#tab2">Tab 2</a>
  </nav>
  <div class="tab-content">
    <div id="tab1">Content 1</div>
    <div id="tab2">Content 2</div>
  </div>
</div>

CSS样式：

css制作tab菜单

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

.tab-content > div:target {
  display: block;
}

.tab-nav a {
  padding: 10px 15px;
  background: #f0f0f0;
  text-decoration: none;
  color: #333;
}

.tab-nav a:hover {
  background: #e0e0e0;
}

方法二：基于radio input

HTML结构：

<div class="tab-container">
  <input type="radio" name="tabs" id="tab1" checked>
  <label for="tab1">Tab 1</label>

  <input type="radio" name="tabs" id="tab2">
  <label for="tab2">Tab 2</label>

  <div class="tab-content">
    <div>Content 1</div>
    <div>Content 2</div>
  </div>
</div>

CSS样式：

css制作tab菜单

input[type="radio"] {
  display: none;
}

label {
  display: inline-block;
  padding: 10px 15px;
  background: #f0f0f0;
  cursor: pointer;
}

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

#tab1:checked ~ .tab-content > div:nth-child(1),
#tab2:checked ~ .tab-content > div:nth-child(2) {
  display: block;
}

添加动画效果

可以为Tab切换添加过渡动画：

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

.tab-content > div:target {
  opacity: 1;
  height: auto;
}

响应式设计建议

针对移动设备可以调整布局：

@media (max-width: 600px) {
  .tab-nav {
    display: flex;
    flex-direction: column;
  }

  label {
    width: 100%;
    text-align: center;
  }
}

样式增强技巧

添加选中状态指示器：

.tab-nav a.active,
input[type="radio"]:checked + label {
  background: #4CAF50;
  color: white;
  position: relative;
}

input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #4CAF50;
}

这些方法均无需JavaScript即可实现完整功能，适合需要轻量级解决方案的场景。根据项目需求选择合适的方法，:target方案更简洁但会修改URL哈希，radio方案更灵活但需要更多HTML结构。