纯css制作tab菜单
纯CSS制作Tab菜单的方法
使用纯CSS实现Tab菜单可以通过:target伪类或:checked伪类结合相邻兄弟选择器完成。以下是两种常见方法：
使用:target伪类
HTML结构：
<div class="tabs">
<nav>
<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
</nav>
<div id="tab1" class="tab-content">内容1</div>
<div id="tab2" class="tab-content">内容2</div>
<div id="tab3" class="tab-content">内容3</div>
</div>CSS样式：
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
}
.tab-content:target {
display: block;
}
nav a {
display: inline-block;
padding: 10px 15px;
background: #eee;
text-decoration: none;
}
nav a:hover {
background: #ddd;
}使用隐藏单选框和:checked伪类
HTML结构：
<div class="tabs">
<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>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">Tab 3</label>
<div class="tab-content" id="content1">内容1</div>
<div class="tab-content" id="content2">内容2</div>
<div class="tab-content" id="content3">内容3</div>
</div>CSS样式：
input[type="radio"] {
display: none;
}
label {
display: inline-block;
padding: 10px 15px;
background: #eee;
cursor: pointer;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
display: block;
}
input[type="radio"]:checked + label {
background: #ddd;
font-weight: bold;
}样式优化建议
- 添加过渡效果使切换更平滑
- 使用CSS变量统一管理颜色
- 为活动标签页添加高亮样式
- 响应式设计适配移动端
两种方法各有特点：:target方案无需JavaScript但会修改URL哈希；单选框方案更稳定但需要合理组织HTML结构。根据具体需求选择合适方案。
