本文介绍一种健壮、易维护的 jQuery 方案，用于在多个 .entry 容器间通过“上一页/下一页”按钮进行顺序切换，避免依赖 DOM 位置关系，支持任意数量的页面且兼容常见 HTML 结构。
本文介绍一种健壮、易维护的 jquery 方案，用于在多个 `.entry` 容器间通过“上一页/下一页”按钮进行顺序切换，避免依赖 dom 位置关系，支持任意数量的页面且兼容常见 html 结构。
在构建分步阅读、教程引导或多页表单等场景时，常需让用户通过按钮（如“Next”或“Back”）依次浏览隐藏的
内容。虽然纯 CSS 方案（如 :target 或 :has()）在特定条件下可行，但跨页面导航、状态保持与边界控制仍需 JavaScript 支持——而 jQuery 提供了简洁可靠的实现路径。
✅ 推荐方案：索引驱动的全局状态管理
相比直接操作 .parent().next()（易因 DOM 结构微调而失效），更推荐预先缓存所有 .entry 元素，用整数索引跟踪当前可见项：
<!-- 引入 jQuery（建议放在 <head> 或 <body> 底部） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML 结构（无需严格相邻，但建议保持语义清晰） --> <div class="entry"> <p>paragraph text 1</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4"><img src="https://img.php.cn/upload/manual/001/431/639/6a21619eac924328.png" alt="jQuery 1.12.4" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="overflowclass">jQuery 1.12.4</a> <p class="overflowclass">jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。</p> </div> <a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button class="next">Next</button> </div> <div class="entry" style="display:none;"> <p>paragraph text 2</p> <button class="back">Back</button> <button class="next">Next</button> </div> <div class="entry" style="display:none;"> <p>paragraph text 3</p> <button class="back">Back</button> </div>
// 初始化：获取所有 .entry 元素并设置起始索引
const $entries = $('.entry');
let currentIndex = 0;
// 下一页逻辑
$('.next').on('click', function() {
if (currentIndex 0) {
currentIndex--;
$entries.hide().eq(currentIndex).show();
}
});
? 关键改进点说明
-
解耦结构依赖：不再依赖 .parent() 和 .next() 的 DOM 层级关系，即使 .entry 外层包裹
或插入广告 也不影响功能；- 边界安全：通过 if (currentIndex
- 性能优化：.hide().eq(i).show() 比循环 .hide() 更高效；$entries 缓存避免重复 DOM 查询；
- 可扩展性强：新增 .entry 只需添加 HTML，无需修改 JS 逻辑。
⚠️ 注意事项与增强建议
- 首次加载优化：确保仅第一个 .entry 可见（其余 display: none），或在脚本开头统一初始化：$entries.hide().first().show();
- 无障碍支持：为按钮添加 aria-label（如 aria-label="Go to next section"），并考虑键盘导航（Tab + Enter）；
- 无 jQuery 替代方案：若需原生 JS，可用 document.querySelectorAll('.entry') 替代 $entries，用 element.classList.add('active') 配合 CSS 控制显隐，提升轻量化程度；
-
样式补充建议：为 .entry 添加过渡动画增强体验：
.entry { transition: opacity 0.3s ease, transform 0.2s ease; } .entry:not(:first-of-type) { opacity: 0; transform: translateX(20px); } .entry.active { opacity: 1; transform: translateX(0); }
此方案兼顾简洁性与鲁棒性，适合初学者快速上手，也满足生产环境对可维护性的基本要求。只需三步：引入 jQuery、标记容器类名、注入上述脚本，即可实现专业级分页导航。
