CSS 如何实现 Tabs 标签页？

Question

CSS 如何实现 Tabs 标签页？

仓乃文 · Accepted Answer

Tabs 标签页通过 radio + :checked + ~ 兄弟选择器实现纯 CSS 的标签页切换，无需 JavaScript。

```css
.tabs input[type="radio"] {
  display: none;
}

.tab-labels {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
}

.tab-labels label {
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.3s;
}

#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"],
#tab3:checked ~ .tab-labels label[for="tab3"] {
  color: #6c5ce7;
  border-bottom-color: #6c5ce7;
}

.tab-panels .panel {
  display: none;
  padding: 20px 0;
}

#tab1:checked ~ .tab-panels .panel:nth-child(1),
#tab2:checked ~ .tab-panels .panel:nth-child(2),
#tab3:checked ~ .tab-panels .panel:nth-child(3) {
  display: block;
}
```

补充说明：
- radio 的 name 属性相同实现互斥选择
- :checked + ~ 兄弟选择器联动标签样式和面板显示
- 激活标签通过 border-bottom 高亮
- 适合设置面板、产品详情、文档导航等场景