答案：利用radio按钮与label结合:checked伪类实现无js标签页切换，通过隐藏radio、样式化label、控制后续内容块的显示与隐藏完成交互，结构清晰且兼容性好。
用css制作标签页切换效果，核心思路是利用html的锚点链接或radio单选按钮配合
1. 使用Radio按钮和label实现切换
通过隐藏radio按钮，使用label模拟标签按钮，再用:checked伪类控制内容显示。
结构如下：
<div class="tabs"> <input type="radio" name="tab" id="tab1" checked> <label for="tab1">首页</label> <p><input type="radio" name="tab" id="tab2"> <label for="tab2">关于</label></p><p><input type="radio" name="tab" id="tab3"> <label for="tab3">联系</label></p><p><div class="tab-content" id="content1">这里是首页内容</div> <div class="tab-content" id="content2">这里是关于内容</div> <div class="tab-content" id="content3">这里是联系内容</div> </div></p>
2. 添加css样式控制显示与隐藏
关键在于默认隐藏所有内容，当某个radio被选中时，对应的内容才显示。
立即学习“前端免费学习笔记（深入）”；
.tabs { width: 400px; margin: 20px auto; font-family: Arial, sans-serif; } <p>/<em> 隐藏radio按钮 </em>/ .tabs input[type="radio"] { display: none; }</p><p>/<em> 标签样式 </em>/ .tabs label { display: inline-block; padding: 10px 15px; background: #f0f0f0; cursor: pointer; border-radius: 6px 6px 0 0; margin-right: 5px; }</p><p>/<em> 选中状态的标签 </em>/ .tabs input[type="radio"]:checked + label { background: #007cba; color: white; }</p><p>/<em> 内容区域 </em>/ .tab-content { display: none; padding: 20px; border: 1px solid #ddd; border-radius: 0 6px 6px 6px; background: #fff; margin-top: -1px; }</p><p>/<em> 默认显示第一个内容 </em>/</p><h1>tab1:checked ~ #content1,</h1><h1>tab2:checked ~ #content2,</h1><h1>tab3:checked ~ #content3 {</h1><p>display: block; }</p>
3. 效果说明与注意事项
这种方案的优点是无需javascript，兼容性较好，适合静态页面。
注意点：
- radio必须有相同的name属性，确保单选
- label的for属性要与input的id对应
- 内容块必须放在radio和label之后，才能用~选择器选中
- :checked伪类只能控制后续兄弟元素
基本上就这些。结构清晰、样式简洁，适合轻量级标签页需求。不复杂但容易忽略细节。