纯 HTML+CSS 实现 换一换 交互

纯 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 状态控制器

<!-- 所有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 将这些表单完全隐藏

第二步：编写多组内容页面

<!-- 第一页内容 -->
<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 实现状态控制

/* 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;
}

三、注意事项

1. radio 放在内容页之前

   通用兄弟选择器~只能匹配当前元素之后的兄弟元素。如果 radio 放在内容页之后，CSS 选择器将无法找到对应的内容页。

2. 所有 radio 必须使用相同的 name 属性

   只有 name 相同的 radio 才会形成互斥的单选组。否则会出现多个 radio 同时被选中，导致多个内容页同时显示。

3. for与id必须完全一致

   大小需一致，例如for="page-2"不能写成for="Page-2"，不能有多余的空格或特殊字符。

4. 循环闭合

   最后一个内容页的label必须绑定第一个 radio 的id，否则点击到最后一页后，再点击 "换一换" 将没有任何反应。

5. 内容页必须是 radio 的直接兄弟元素

   如果内容页被其他 div 包裹，需要调整 CSS 选择器结构，例如：#page-1:checked ~ .container .page-1。

四、总结

1. 用隐藏的 radio 组连接显示切换的内容，每个 radio 代表一个内容页
2. 用**label 的 for-id **将 "换一换" 按钮转化为 radio 的触发器
3. 用CSS :checked 伪类 + 兄弟选择器 实现 "状态变化→内容切换"
   的 radio 组**连接显示切换的内容，每个 radio 代表一个内容页
4. 用**label 的 for-id **将 "换一换" 按钮转化为 radio 的触发器
5. 用CSS :checked 伪类 + 兄弟选择器实现 "状态变化→内容切换"
6. 用每页按钮绑定下一页 radio的方式实现循环切换