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