本文介绍如何通过 jQuery 实现页面中多个 .entry 区块的顺序切换（点击“Next”显示下一项，“Back”返回上一项），避免依赖脆弱的 DOM 结构，提供健壮、可维护的导航逻辑。
本文介绍如何通过 jquery 实现页面中多个 `.entry` 区块的顺序切换（点击“next”显示下一项，“back”返回上一项），避免依赖脆弱的 dom 结构，提供健壮、可维护的导航逻辑。
在构建单页多段式内容（如博客条目、步骤引导或幻灯片式展示）时，常需通过按钮控制不同 <div> 的显隐切换。初学者容易采用 $(this).parent().next().show() 这类基于相邻关系的写法，但该方式对 HTML 结构极度敏感——只要中间插入一个非 .entry 元素，或按钮嵌套层级变化，逻辑即失效。
更可靠的做法是抽象状态管理：预先获取所有目标元素，用索引（entryIndex）统一追踪当前激活项，并通过数组访问精准控制显隐。以下是完整、可直接运行的解决方案：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
✅ 推荐实现（稳定、易扩展）
<!-- 引入 jQuery（建议放在 </body> 前） --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- 内容区块 --> <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> </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() {
if (currentIndex < $entries.length - 1) {
currentIndex++;
$entries.hide().eq(currentIndex).show();
}
});
// Back 按钮事件
$('.back').on('click', function() {
if (currentIndex > 0) {
currentIndex--;
$entries.hide().eq(currentIndex).show();
}
});
});? 关键优势说明
- 结构无关性：不依赖 .parent() 或 .next() 的 DOM 位置，即使 .entry 之间插入广告位、分隔线等其他元素，逻辑依然有效；
- 边界安全：通过 if (currentIndex < $entries.length - 1) 和 if (currentIndex > 0) 防止越界操作，避免显示空白或报错；
- 性能优化：$entries 仅查询一次并复用；.hide().eq(i).show() 利用链式调用，比多次 .hide() + $(entryElements[i]).show() 更高效；
- 可扩展性强：后续添加新 .entry 只需插入 HTML，无需修改 JS —— 索引自动适配。
⚠️ 注意事项
- 确保 jQuery 已正确加载（推荐使用 CDN，版本 ≥ 3.3.1）；
- 所有 .entry 必须具有相同类名且为同级元素（无需严格相邻，但需能被 $('.entry') 统一选中）；
- 若需支持键盘导航（如 ← → 方向键）或 URL 锚点同步，可在当前逻辑基础上扩展事件监听；
- 纯 CSS 方案（如 :target 伪类）仅适用于带 id 的锚点跳转，无法实现“按钮触发+状态记忆”，故 JavaScript 是本场景最优解。
此方案兼顾简洁性与鲁棒性，适合初学者理解并快速落地，也满足生产环境对稳定性和可维护性的基本要求。
