无需JavaScript实现分页时如何将页码调整至内容下方

问题根源 #

原代码依赖CSS后续兄弟选择符~实现状态控制，该选择符仅能匹配同一父元素下、位于当前元素之后的同级节点。你将分页内容移到单选框前方后，~无法命中内容元素，导致所有内容默认隐藏后无法被触发显示。

调整方案 #

通过label标签关联单选框，解除单选框和页码按钮的位置绑定，既保留纯CSS无JS的特性，也能实现内容在上、页码在下的布局。

调整后完整代码 #

CSS代码

.b,
input[type="radio"] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
/* 单选框完全隐藏，仅做状态存储 */
input[type="radio"] {
    display: none;
}
.b {
    display: inline-block;
    background-color: gray;
    text-align: center;
    color: white;
    cursor: pointer;
    margin: 0 2px;
}
.p {
    display: none;
    min-height: 100px;
    padding: 10px 0;
}
/* 原有状态选择逻辑无需改动 */
#p1:checked ~ .p1,
#p2:checked ~ .p2,
#p3:checked ~ .p3 {
    display: block;
}
/* 可选：增加页码选中态样式 */
#p1:checked ~ label[for="p1"],
#p2:checked ~ label[for="p2"],
#p3:checked ~ label[for="p3"] {
    background-color: #1a1a1a;
}

HTML代码

<div>
    <!-- 隐藏单选框放在最顶部，保证可以选中后续内容 -->
    <input type="radio" name="p" id="p1" checked>
    <input type="radio" name="p" id="p2">
    <input type="radio" name="p" id="p3">

    <!-- 分页内容放在中间，展示在页码上方 -->
    <div class="p p1">Page 1</div>
    <div class="p p2">Page 2</div>
    <div class="p p3">Page 3</div>

    <!-- 页码按钮放在底部，用label关联对应单选框 -->
    <label for="p1" class="b">1</label>
    <label for="p2" class="b">2</label>
    <label for="p3" class="b">3</label>
</div>

实现逻辑 #

• 单选框放在父容器最前端隐藏，保留对后续同级内容的状态控制能力
• 页码改用label实现，通过for属性绑定对应单选框ID，点击页码即可触发单选框的选中状态，无需和单选框位置绑定
• 内容区域位于单选框之后、页码之前，同时满足布局需求和CSS选择器匹配规则

内容的提问来源于stack exchange，提问作者2Zong