只用HTML和CSS实现换一换效果

结合刚刚做的百度热搜「换一换」案例，讲解纯 HTML + CSS 分页的经典实现方式。

一、核心思想

分页本质上就是：

点击页码 ↓ 切换状态 ↓ 显示对应内容 ↓ 隐藏其它内容

代码实际上利用了：

<inputtype="radio">

的checked状态来记录当前页。

二、HTML结构

1. 隐藏的radio

<inputtype="radio"name="page"id="p1"checked><inputtype="radio"name="page"id="p2"><inputtype="radio"name="page"id="p3">

作用：

记录当前页 p1 → 第一页 p2 → 第二页 p3 → 第三页

因为：

name="page"

相同，

所以：

一次只能选中一个

2. 内容区

<divid="p1-content"class="page">第一页内容</div><divid="p2-content"class="page">第二页内容</div><divid="p3-content"class="page">第三页内容</div>

3. 页码按钮

<labelfor="p1">1</label><labelfor="p2">2</label><labelfor="p3">3</label>

点击：

<labelfor="p2">

相当于点击：

<inputid="p2">

于是：

p2变成checked

三、CSS控制显示

先隐藏所有页：

.page{display:none;}

当第一页被选中：

#p1:checked ~ #p1-content{display:block;}

意思：

如果p1被选中 显示p1-content

第二页：

#p2:checked ~ #p2-content{display:block;}

第三页：

#p3:checked ~ #p3-content{display:block;}

四、流程图

点击label │ ▼ 对应radio被选中 │ ▼ checked状态改变 │ ▼ CSS选择器生效 #p2:checked~#p2-content │ ▼ 显示第二页 │ ▼ 其它页面继续隐藏

五、热搜案例里的实现

实际上就是：

第一页热搜 第二页热搜 第三页热搜 第四页热搜 第五页热搜

隐藏全部：

.hot>.hot-list{display:none;}

第一页：

#hp1:checked~#hp1-content{display:flex;}

第二页：

#hp2:checked~#hp2-content{display:flex;}

依此类推。

六、换一换为什么能翻页

例如：

<labelfor="hp2"class="hs1">换一换</label>

点击：

hs1 ↓ hp2被选中 ↓ hp2 checked ↓ 显示第二页

第二页的按钮：

<labelfor="hp3"class="hs2">换一换</label>

点击：

hp3 checked ↓ 显示第三页

形成循环：

hp1 → hp2 → hp3 → hp4 → hp5 → hp1

七、优缺点

优点

不需要 JavaScript

HTML + CSS 即可实现分页

简单、性能高。

缺点

页数固定：

只能提前写好 第一页 第二页 第三页 ...

如果数据动态变化：

数据库 接口返回

就必须用 JavaScript。

八、总结：

纯 HTML + CSS 分页的本质是：利用radio的checked状态保存当前页，再通过:checked + 兄弟选择器(~)控制对应内容的显示与隐藏，而页码按钮通常使用label for="id"来切换不同的radio。