纯 HTML+CSS 实现 "换一换" 交互
不用 JavaScript，仅通过 HTML 表单与 CSS 实现 "换一换" 效果。
一、前置知识
1.1 label与input的for-id联动
- 规则 ：当
<label>标签的for属性值与<input>标签的id属性值完全相同 时，点击<label>等同于点击对应的<input>元素 - 作用 ：将 "换一换" 按钮转化为
input的触发器，实现点击触发状态变化
1.2 radio单选组的互斥特性
- 规则 ：多个
type="radio"的<input>元素，只要name属性值相同，就会形成一个单选组，同一时间只能有一个被选中 - 作用：作为控制器，用不同的选中状态代表不同的内容页
1.3 :checked伪类与通用兄弟选择器~
:checked：匹配处于选中状态的radio或checkbox元素~（通用兄弟选择器）：匹配同一父元素下，当前元素之后的所有兄弟元素- 作用 ：通过
#radio-id:checked ~ .content-page的语法，实现 "选中某个 radio → 显示对应内容页" 的功能
1.4 切换的逻辑
- 为每一页内容创建一个对应的
radio - 在每一页内容内部放置一个 "换一换" 按钮（
label） - 每个按钮的
for属性绑定下一页 对应的radio的id - 最后一页的按钮绑定第一页的
radio，形成闭环
二、具体实现步骤
第一步：定义隐藏的 radio 状态控制器
html
<!-- 所有radio必须放在内容页之前，且name相同 -->
<input type="radio" name="page-switch" id="page-1" checked>
<input type="radio" name="page-switch" id="page-2">
<input type="radio" name="page-switch" id="page-3">checked：默认选中第一页- 后续通过 CSS 将这些表单完全隐藏
第二步：编写多组内容页面
html
<!-- 第一页内容 -->
<div class="content-page page-1">
<ul>
<li>内容1-1</li>
<li>内容1-2</li>
<li>内容1-3</li>
</ul>
<!-- 换一换按钮：绑定第二页的radio -->
<label for="page-2" class="change-btn">换一换</label>
</div>
<!-- 第二页内容 -->
<div class="content-page page-2">
<ul>
<li>内容2-1</li>
<li>内容2-2</li>
<li>内容2-3</li>
</ul>
<!-- 换一换按钮：绑定第三页的radio -->
<label for="page-3" class="change-btn">换一换</label>
</div>
<!-- 第三页内容 -->
<div class="content-page page-3">
<ul>
<li>内容3-1</li>
<li>内容3-2</li>
<li>内容3-3</li>
</ul>
<!-- 换一换按钮：绑定第一页的radio，形成循环 -->
<label for="page-1" class="change-btn">换一换</label>
</div>
第三步：CSS 实现状态控制
css
/* 1. 隐藏所有radio（控制器不可见） */
input[type="radio"] {
display: none;
}
/* 2. 默认隐藏所有内容页 */
.content-page {
display: none;
}
/* 3. 当对应radio被选中时，显示该内容页 */
#page-1:checked ~ .page-1,
#page-2:checked ~ .page-2,
#page-3:checked ~ .page-3 {
display: block;
}
三、注意事项
-
radio 放在内容页之前
通用兄弟选择器
~只能匹配当前元素之后的兄弟元素。如果 radio 放在内容页之后，CSS 选择器将无法找到对应的内容页。 -
所有 radio 必须使用相同的 name 属性
只有 name 相同的 radio 才会形成互斥的单选组。否则会出现多个 radio 同时被选中，导致多个内容页同时显示。
-
for与id必须完全一致大小需一致，例如
for="page-2"不能写成for="Page-2"，不能有多余的空格或特殊字符。 -
循环闭合
最后一个内容页的
label必须绑定第一个 radio 的id，否则点击到最后一页后，再点击 "换一换" 将没有任何反应。 -
内容页必须是 radio 的直接兄弟元素
如果内容页被其他 div 包裹，需要调整 CSS 选择器结构，例如：
#page-1:checked ~ .container .page-1。
四、总结
- 用隐藏的 radio 组连接显示切换的内容，每个 radio 代表一个内容页
- 用**label 的 for-id **将 "换一换" 按钮转化为 radio 的触发器
- 用CSS :checked 伪类 + 兄弟选择器 实现 "状态变化→内容切换"
的 radio 组**连接显示切换的内容，每个 radio 代表一个内容页 - 用**label 的 for-id **将 "换一换" 按钮转化为 radio 的触发器
- 用CSS :checked 伪类 + 兄弟选择器实现 "状态变化→内容切换"
- 用每页按钮绑定下一页 radio的方式实现循环切换