选项卡切换是页面中非常常见的交互组件，通常用于在同一区域展示不同分类的内容，避免页面内容过于冗长。很多人默认认为这类交互必须依赖JavaScript实现，实际上利用CSS的伪类和选择器特性，也能完成无JavaScript的选项卡切换效果。
实现核心思路
纯CSS实现选项卡切换的核心是利用<input>单选框的选中状态，配合CSS的相邻兄弟选择器或者通用兄弟选择器，控制对应内容区域的显示和隐藏。具体逻辑可以分为三步：
- 搭建基础结构，包含选项卡标题区域和内容区域，用单选框关联标题和内容
- 默认隐藏所有内容区域，只显示第一个内容区域
- 当某个单选框被选中时，显示它对应的内容区域，隐藏其他内容区域
完整代码实现
HTML结构
首先编写页面的基础HTML结构，使用<input type="radio">作为选项卡的触发元素，每个单选框设置相同的name属性保证同一时间只能选中一个，再通过<label>标签关联对应的单选框，内容区域用div包裹，通过id和单选框的for属性关联。
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tab-container">
<!-- 选项卡标题区域 -->
<div class="tab-header">
<input type="radio" name="tab" id="tab1" checked>
<label for="tab1">选项卡一</label>
<input type="radio" name="tab" id="tab2">
<label for="tab2">选项卡二</label>
<input type="radio" name="tab" id="tab3">
<label for="tab3">选项卡三</label>
</div>
<!-- 选项卡内容区域 -->
<div class="tab-content">
<div class="content" id="content1">
<h3>第一个选项卡内容</h3>
<p>这是第一个选项卡对应的展示内容，这里可以放置任意页面元素，比如文本、图片、列表等。</p>
</div>
<div class="content" id="content2">
<h3>第二个选项卡内容</h3>
<p>这是第二个选项卡对应的展示内容，切换选项卡时会自动显示这部分内容，隐藏其他内容区域。</p>
</div>
<div class="content" id="content3">
<h3>第三个选项卡内容</h3>
<p>这是第三个选项卡对应的展示内容，纯CSS实现不需要任何JavaScript代码，兼容性也比较好。</p>
</div>
</div>
</div>
</body>
</html>
CSS样式
接下来编写CSS样式，首先隐藏所有单选框，然后美化<label>标签作为可点击的选项卡标题，再默认隐藏所有内容区域，最后通过:checked伪类选择器，当单选框被选中时，显示对应的内容区域。
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
font-family: "Microsoft YaHei", sans-serif;
}
/* 容器样式 */
.tab-container {
width: 600px;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
/* 隐藏单选框 */
.tab-header input[type="radio"] {
display: none;
}
/* 选项卡标题样式 */
.tab-header label {
display: inline-block;
padding: 10px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
/* 选中状态下的标题样式 */
.tab-header input[type="radio"]:checked + label {
color: #1890ff;
border-bottom-color: #1890ff;
}
/* 内容区域样式 */
.tab-content {
padding: 20px;
border-top: 1px solid #e0e0e0;
}
/* 默认隐藏所有内容 */
.content {
display: none;
}
/* 选中对应单选框时显示对应内容 */
#tab1:checked ~ .tab-content #content1,
#tab2:checked ~ .tab-content #content2,
#tab3:checked ~ .tab-content #content3 {
display: block;
}
关键知识点说明
通用兄弟选择器 ~
代码中用到的~是CSS通用兄弟选择器，作用是选择指定元素后面的所有符合条件的兄弟元素。比如#tab1:checked ~ .tab-content的意思是，当id为tab1的单选框被选中时，选择它后面的所有class为tab-content的兄弟元素。
:checked 伪类
:checked是CSS的伪类选择器，专门用来匹配被选中的单选框<input type="radio">或者复选框<input type="checkbox">，通过它可以判断当前哪个选项卡被选中，从而控制对应内容的显示。
单选框的name属性
所有单选框设置相同的name属性，保证同一时间只能有一个单选框被选中，这是实现选项卡互斥切换的基础，如果name不同，就可以同时选中多个，无法实现切换效果。
效果优化建议
上述代码已经实现了基础的选项卡切换功能，还可以根据需求做一些优化：
- 给内容区域的显示添加过渡动画，让切换更平滑
- 调整选项卡标题的样式，适配不同的页面设计风格
- 如果选项卡数量不固定，可以用循环生成结构，减少重复代码
这种纯CSS实现的选项卡切换适合内容不需要动态加载的场景，如果选项卡内容需要异步请求获取，还是建议结合JavaScript实现，灵活性更高。