本文介绍如何通过 jQuery 实现点击“Next”或“Back”按钮在多个 .entry 区块间顺序切换，避免依赖脆弱的 DOM 结构，提供健壮、可维护的分步导航方案。
本文介绍如何通过 jquery 实现点击“next”或“back”按钮在多个 `.entry` 区块间顺序切换，避免依赖脆弱的 dom 结构，提供健壮、可维护的分步导航方案。
在构建多步骤内容页（如博客连载、表单向导或教程分页）时，常需隐藏除当前项外的所有区块，并通过按钮控制导航。原始思路——用 $(this).parent().hide().next().show() ——看似简洁，但极易失效：一旦 HTML 结构微调（例如插入注释、空格、包装容器或调整按钮位置），.next() 就可能选不到目标 .entry，导致逻辑中断。
更可靠的做法是脱离 DOM 邻接关系，转而基于索引统一管理所有目标元素。以下是优化后的完整实现：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 推荐方案：索引驱动的导航控制
<!-- 引入 jQuery（建议放在 <head> 或页面底部） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- 内容区块：所有 .entry 初始仅第一个可见 --> <div class="entry"> <p>paragraph text 1</p> <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> <!-- 最后一页无需 Next 按钮，提升用户体验 --> </div>
.entry {
text-align: left;
padding: 0 10px 1px;
font-size: 15px;
font-family: "Book Antiqua", serif;
width: 550px;
height: 500px;
overflow: auto;
margin: auto;
}$(document).ready(function() {
const $entries = $('.entry'); // 缓存所有 .entry 元素（jQuery 对象）
let currentIndex = 0;
// Next 按钮逻辑
$('.next').on('click', function(e) {
e.preventDefault(); // 防止意外默认行为（如表单提交）
if (currentIndex < $entries.length - 1) {
currentIndex++;
$entries.hide().eq(currentIndex).show(); // 批量隐藏 + 精准显示
}
});
// Back 按钮逻辑
$('.back').on('click', function(e) {
e.preventDefault();
if (currentIndex > 0) {
currentIndex--;
$entries.hide().eq(currentIndex).show();
}
});
});? 关键改进点说明
- 结构解耦：不再依赖 .parent() 和 .next() 的 DOM 层级关系，即使 .entry 外层包裹 <section> 或中间插入广告 <div>，逻辑依然健壮。
- 边界防护：通过 if (currentIndex < $entries.length - 1) 和 if (currentIndex > 0) 防止越界操作，避免显示空白或报错。
- 性能优化：$entries.hide().eq(currentIndex).show() 是链式调用，比循环 .hide() 更高效；且 $entries 仅查询一次，减少 DOM 查找开销。
- 用户体验增强：最后一项移除 Next 按钮、首项移除 Back 按钮（示例中已体现），或添加禁用状态（如 $(this).prop('disabled', true)），让界面更直观。
⚠️ 注意事项
- 确保 jQuery 在脚本执行前已加载（推荐将 <script> 放在 </body> 前，或使用 $(document).ready() 包裹）。
- 若页面含动态生成的 .entry，需在新增后重新初始化 currentIndex 或改用事件委托（如 $(document).on('click', '.next', ...)）。
- 纯 CSS 方案（如 :target 伪类）仅支持 URL 锚点跳转，无法实现无刷新按钮交互，故 JavaScript 是当前场景最实用选择。
此方案兼顾简洁性与鲁棒性，适合初学者快速上手，也易于后续扩展（如添加过渡动画、进度条或 localStorage 记忆位置）。
