纯css制作tab菜单
纯CSS制作Tab菜单的方法
方法一：使用:target伪类
通过CSS的:target伪类选择器实现Tab切换效果，无需JavaScript。
HTML结构：
<div class="tabs">
<div class="tab-links">
<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
</div>
<div class="tab-content">
<div id="tab1">Content 1</div>
<div id="tab2">Content 2</div>
<div id="tab3">Content 3</div>
</div>
</div>CSS样式：
.tab-content > div {
display: none;
padding: 20px;
border: 1px solid #ddd;
}
.tab-content > div:target {
display: block;
}
.tab-links a {
display: inline-block;
padding: 10px 20px;
background: #f1f1f1;
text-decoration: none;
color: #333;
}
.tab-links a:hover {
background: #ddd;
}方法二：使用radio input和:checked伪类
通过隐藏的radio input和:checked伪类实现更稳定的Tab切换。
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">
<div class="tab-pane">Content 1</div>
<div class="tab-pane">Content 2</div>
<div class="tab-pane">Content 3</div>
</div>
</div>CSS样式：
input[type="radio"] {
display: none;
}
label {
display: inline-block;
padding: 10px 20px;
background: #f1f1f1;
cursor: pointer;
}
.tab-pane {
display: none;
padding: 20px;
border: 1px solid #ddd;
}
#tab1:checked ~ .tab-content .tab-pane:nth-child(1),
#tab2:checked ~ .tab-content .tab-pane:nth-child(2),
#tab3:checked ~ .tab-content .tab-pane:nth-child(3) {
display: block;
}
input[type="radio"]:checked + label {
background: #ddd;
}方法三：使用flexbox布局
结合flexbox布局创建响应式Tab菜单。
HTML结构：
<div class="tabs">
<div class="tab-header">
<div class="tab-link active" data-tab="tab1">Tab 1</div>
<div class="tab-link" data-tab="tab2">Tab 2</div>
<div class="tab-link" data-tab="tab3">Tab 3</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Content 1</div>
<div class="tab-pane" id="tab2">Content 2</div>
<div class="tab-pane" id="tab3">Content 3</div>
</div>
</div>CSS样式：
.tabs {
display: flex;
flex-direction: column;
}
.tab-header {
display: flex;
border-bottom: 1px solid #ddd;
}
.tab-link {
padding: 10px 20px;
cursor: pointer;
background: #f1f1f1;
}
.tab-link.active {
background: #ddd;
border-bottom: 2px solid #333;
}
.tab-pane {
display: none;
padding: 20px;
}
.tab-pane.active {
display: block;
}注意事项
- 方法一依赖URL哈希变化，可能影响浏览器历史记录
- 方法二需要合理组织HTML结构，确保选择器能正确匹配
- 方法三需要预先设置active类，无法实现动态切换
- 所有方法都需要考虑响应式设计，确保在不同屏幕尺寸下正常显示
这些方法都可以实现纯CSS的Tab菜单功能，根据具体需求选择最适合的实现方式。
