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

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

一、核心思想

分页本质上就是：

text 复制代码

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

代码实际上利用了：

html 复制代码

<input type="radio">

的 checked 状态来记录当前页。

二、HTML结构

1. 隐藏的radio

html 复制代码

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

作用：

text 复制代码

记录当前页

p1 → 第一页
p2 → 第二页
p3 → 第三页

因为：

html 复制代码

name="page"

相同，

所以：

text 复制代码

一次只能选中一个

2. 内容区

html 复制代码

<div id="p1-content" class="page">
    第一页内容
</div>

<div id="p2-content" class="page">
    第二页内容
</div>

<div id="p3-content" class="page">
    第三页内容
</div>

3. 页码按钮

html 复制代码

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

点击：

html 复制代码

<label for="p2">

相当于点击：

html 复制代码

<input id="p2">

于是：

text 复制代码

p2变成checked

三、CSS控制显示

先隐藏所有页：

css 复制代码

.page {
    display: none;
}

当第一页被选中：

css 复制代码

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

意思：

text 复制代码

如果p1被选中

显示p1-content

第二页：

css 复制代码

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

第三页：

css 复制代码

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

四、流程图

text 复制代码

点击label
      │
      ▼
对应radio被选中
      │
      ▼
checked状态改变
      │
      ▼
CSS选择器生效

#p2:checked~#p2-content

      │
      ▼
显示第二页
      │
      ▼
其它页面继续隐藏

五、热搜案例里的实现

实际上就是：

text 复制代码

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

隐藏全部：

css 复制代码

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

第一页：

css 复制代码

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

第二页：

css 复制代码

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

依此类推。

六、换一换为什么能翻页

例如：

html 复制代码

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

点击：

text 复制代码

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

第二页的按钮：

html 复制代码

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

点击：

text 复制代码

hp3 checked
   ↓
显示第三页

形成循环：

text 复制代码

hp1 → hp2 → hp3 → hp4 → hp5 → hp1

七、优缺点

优点

不需要 JavaScript

text 复制代码

HTML
+
CSS
即可实现分页

简单、性能高。

缺点

页数固定：

text 复制代码

只能提前写好

第一页
第二页
第三页
...

如果数据动态变化：

text 复制代码

数据库
接口返回

就必须用 JavaScript。

八、总结：

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