CSS实现tab选项卡切换
实现Tab选项卡切换可以通过纯CSS完成，主要利用 :target 伪类或 :checked 伪类结合 <input type="radio"> 来实现。以下是两种常见的实现方式：
方法一：使用 :target 伪类
:target 伪类可以匹配当前URL的片段标识符（即 # 后面的部分），通过点击链接切换内容。
HTML结构
html
<div class="tab-container">
<div class="tab-nav">
<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" class="tab-item">Content 1</div>
<div id="tab2" class="tab-item">Content 2</div>
<div id="tab3" class="tab-item">Content 3</div>
</div>
</div>CSS样式
css
.tab-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.tab-nav {
display: flex;
border-bottom: 2px solid #ccc;
}
.tab-nav a {
padding: 10px 20px;
text-decoration: none;
color: #333;
background-color: #f1f1f1;
margin-right: 5px;
border: 1px solid #ccc;
border-bottom: none;
}
.tab-nav a:hover {
background-color: #ddd;
}
.tab-content {
padding: 20px;
border: 1px solid #ccc;
border-top: none;
}
.tab-item {
display: none;
}
.tab-item:target {
display: block;
}说明：
- 点击链接时，URL会改变为
#tab1、#tab2等，:target伪类会匹配对应的内容并显示。 - 其他未匹配的内容会隐藏。
方法二：使用 <input type="radio"> 和 :checked 伪类
通过单选框（<input type="radio">）和 :checked 伪类实现选项卡切换，无需改变URL。
HTML结构
html
<div class="tab-container">
<div class="tab-nav">
<label for="tab1">Tab 1</label>
<label for="tab2">Tab 2</label>
<label for="tab3">Tab 3</label>
</div>
<div class="tab-content">
<input type="radio" name="tabs" id="tab1" checked>
<div class="tab-item">Content 1</div>
<input type="radio" name="tabs" id="tab2">
<div class="tab-item">Content 2</div>
<input type="radio" name="tabs" id="tab3">
<div class="tab-item">Content 3</div>
</div>
</div>CSS样式
css
.tab-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.tab-nav {
display: flex;
border-bottom: 2px solid #ccc;
}
.tab-nav label {
padding: 10px 20px;
text-decoration: none;
color: #333;
background-color: #f1f1f1;
margin-right: 5px;
border: 1px solid #ccc;
border-bottom: none;
cursor: pointer;
}
.tab-nav label:hover {
background-color: #ddd;
}
.tab-content {
padding: 20px;
border: 1px solid #ccc;
border-top: none;
position: relative;
}
.tab-item {
display: none;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + .tab-item {
display: block;
}说明：
- 使用
<label>标签关联<input type="radio">，点击标签时会选中对应的单选框。 :checked伪类用于匹配选中的单选框，显示对应的内容。
方法三：使用Flexbox布局（更简洁的实现）
结合Flexbox布局，可以更简洁地实现选项卡切换。
HTML结构
html
<div class="tab-container">
<div class="tab-nav">
<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>
<div class="tab-content">
<div class="tab-item">Content 1</div>
<div class="tab-item">Content 2</div>
<div class="tab-item">Content 3</div>
</div>
</div>CSS样式
css
.tab-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.tab-nav {
display: flex;
border-bottom: 2px solid #ccc;
}
.tab-nav label {
padding: 10px 20px;
text-decoration: none;
color: #333;
background-color: #f1f1f1;
margin-right: 5px;
border: 1px solid #ccc;
border-bottom: none;
cursor: pointer;
}
.tab-nav label:hover {
background-color: #ddd;
}
.tab-content {
display: flex;
overflow: hidden;
}
.tab-item {
flex: 1;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
display: none;
}
input[type="radio"] {
display: none;
}
#tab1:checked ~ .tab-content .tab-item:nth-child(1),
#tab2:checked ~ .tab-content .tab-item:nth-child(2),
#tab3:checked ~ .tab-content .tab-item:nth-child(3) {
display: block;
}说明：
- 使用Flexbox布局实现选项卡内容的动态切换。
- 通过
:checked伪类控制显示对应的内容。
总结
:target方法：简单易用，但会改变URL，适合静态页面。<input type="radio">方法：无需改变URL，适合动态页面。- Flexbox方法：结合布局更灵活，适合复杂场景。
根据项目需求选择合适的方式即可！
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github