可切换标签组件是页面中常见的交互模块，通常用于内容分类展示，用户点击不同标签可以切换对应的内容区域。通过CSS结合input和label元素，我们可以完全不依赖JavaScript实现这类组件的状态切换效果，核心是利用input的checked状态和label的关联特性来控制样式变化。
实现原理说明
实现的核心逻辑基于以下两个特性：
- label元素可以通过for属性关联到对应的input元素，点击label时会触发关联input的状态变化，比如单选框的选中状态切换。
- CSS的
:checked伪类可以选中处于选中状态的input元素，结合相邻兄弟选择器或者通用兄弟选择器，可以控制其他元素的显示隐藏或样式变化。
我们通常会使用隐藏的radio类型的input作为状态控制器，每个标签对应一个radio，同一组radio设置相同的name属性保证单选特性，label作为可视化的标签按钮，内容区域则根据对应radio的选中状态显示或隐藏。
基础结构搭建
首先我们需要搭建组件的HTML结构，包含隐藏的input控制器、label标签按钮、对应的内容区域，示例结构如下：
<div class="tab-container">
<!-- 标签控制器 -->
<input type="radio" name="tab" id="tab1" checked>
<input type="radio" name="tab" id="tab2">
<input type="radio" name="tab" id="tab3">
<!-- 标签按钮 -->
<div class="tab-header">
<label for="tab1">标签一</label>
<label for="tab2">标签二</label>
<label for="tab3">标签三</label>
</div>
<!-- 标签内容区域 -->
<div class="tab-content">
<div class="content-item">这是第一个标签的内容</div>
<div class="content-item">这是第二个标签的内容</div>
<div class="content-item">这是第三个标签的内容</div>
</div>
</div>
这里三个radio的name都设置为tab，保证同一时间只能选中一个，默认第一个radio添加checked属性，作为初始选中的标签。label的for属性分别对应三个radio的id，实现点击联动。
CSS样式设计
接下来我们编写CSS样式，首先隐藏所有的radio控制器，然后设计标签按钮和内容区域的样式，最后通过:checked伪类实现状态切换。
基础样式设置
/* 隐藏所有radio控制器 */
.tab-container input[type="radio"] {
display: none;
}
/* 标签头部样式 */
.tab-header {
display: flex;
border-bottom: 1px solid #e0e0e0;
}
.tab-header label {
padding: 12px 24px;
cursor: pointer;
color: #666;
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
}
/* 内容区域基础样式 */
.tab-content {
padding: 20px;
}
.tab-content .content-item {
display: none;
}
状态切换逻辑实现
接下来通过CSS选择器，当某个radio被选中时，显示对应的标签按钮高亮样式，同时显示对应的内容区域：
/* 选中radio对应的label高亮 */
#tab1:checked ~ .tab-header label[for="tab1"],
#tab2:checked ~ .tab-header label[for="tab2"],
#tab3:checked ~ .tab-header label[for="tab3"] {
color: #1890ff;
border-bottom-color: #1890ff;
font-weight: bold;
}
/* 选中radio对应的内容显示 */
#tab1:checked ~ .tab-content .content-item:nth-child(1),
#tab2:checked ~ .tab-content .content-item:nth-child(2),
#tab3:checked ~ .tab-content .content-item:nth-child(3) {
display: block;
}
这里使用了通用兄弟选择器~，因为input元素和.tab-header、.tab-content是同级关系，当input被选中时，可以找到后面的对应元素并修改样式。内容区域通过nth-child选择器匹配对应顺序的内容项，实现切换显示。
完整示例代码
将上面的HTML和CSS组合，就可以得到一个完整的可切换标签组件，完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS可切换标签组件</title>
<style>
.tab-container {
width: 600px;
margin: 50px auto;
font-family: Arial, sans-serif;
}
/* 隐藏所有radio控制器 */
.tab-container input[type="radio"] {
display: none;
}
/* 标签头部样式 */
.tab-header {
display: flex;
border-bottom: 1px solid #e0e0e0;
}
.tab-header label {
padding: 12px 24px;
cursor: pointer;
color: #666;
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
}
/* 内容区域基础样式 */
.tab-content {
padding: 20px;
border: 1px solid #e0e0e0;
border-top: none;
min-height: 150px;
}
.tab-content .content-item {
display: none;
line-height: 1.6;
}
/* 选中radio对应的label高亮 */
#tab1:checked ~ .tab-header label[for="tab1"],
#tab2:checked ~ .tab-header label[for="tab2"],
#tab3:checked ~ .tab-header label[for="tab3"] {
color: #1890ff;
border-bottom-color: #1890ff;
font-weight: bold;
}
/* 选中radio对应的内容显示 */
#tab1:checked ~ .tab-content .content-item:nth-child(1),
#tab2:checked ~ .tab-content .content-item:nth-child(2),
#tab3:checked ~ .tab-content .content-item:nth-child(3) {
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<!-- 标签控制器 -->
<input type="radio" name="tab" id="tab1" checked>
<input type="radio" name="tab" id="tab2">
<input type="radio" name="tab" id="tab3">
<!-- 标签按钮 -->
<div class="tab-header">
<label for="tab1">标签一</label>
<label for="tab2">标签二</label>
<label for="tab3">标签三</label>
</div>
<!-- 标签内容区域 -->
<div class="tab-content">
<div class="content-item">
<h3>第一个标签内容</h3>
<p>这里是第一个标签对应的详细内容，可以放置文本、图片等多种元素。</p>
</div>
<div class="content-item">
<h3>第二个标签内容</h3>
<p>这里是第二个标签对应的详细内容，点击不同标签可以切换显示不同的内容区域。</p>
</div>
<div class="content-item">
<h3>第三个标签内容</h3>
<p>这里是第三个标签对应的详细内容，整个组件没有使用任何JavaScript代码。</p>
</div>
</div>
</div>
</body>
</html>
注意事项
- input和对应的内容区域、label必须是同级元素，否则通用兄弟选择器无法生效。
- 如果需要支持更多标签，只需要按照相同的规则添加新的input、label和内容项，同时补充对应的CSS选择器即可。
- 这种方式实现的标签切换不支持浏览器前进后退历史记录，如果需要路由联动，还是需要结合JavaScript实现。