本文介绍如何使用 jquery 实现多区块（div）的顺序切换：点击“next”显示下一项，“back”返回上一项，避免依赖严格 html 结构，提升代码健壮性与可维护性。
本文介绍如何使用 jquery 实现多区块（div）的顺序切换：点击“next”显示下一项，“back”返回上一项，避免依赖严格 html 结构，提升代码健壮性与可维护性。
在构建内容分页、教程步骤或博客连载等场景中，常需让用户通过按钮逐项浏览多个 <div> 区块。虽然原生 CSS（如 :target 或 :has()）在部分场景下可辅助实现，但可控的显隐切换与状态管理仍以 JavaScript 为最优解——尤其当需要支持双向导航（前进/后退）、边界判断及复用逻辑时。
以下是一个稳定、易扩展的 jQuery 实现方案：
✅ 推荐实现（结构无关、状态驱动）
<!-- 引入 jQuery（建议放在 </body> 前） --> <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> </div>
$(document).ready(function() {
const $entries = $('.entry');
let currentIndex = 0;
// 显示指定索引的区块，隐藏其余所有
function showEntry(index) {
if (index < 0 || index >= $entries.length) return; // 越界防护
$entries.hide();
$entries.eq(index).show();
}
// Next 按钮：前进到下一项
$('.next').on('click', function() {
if (currentIndex < $entries.length - 1) {
currentIndex++;
showEntry(currentIndex);
}
});
// Back 按钮：返回上一项
$('.back').on('click', function() {
if (currentIndex > 0) {
currentIndex--;
showEntry(currentIndex);
}
});
});? 关键优势说明
- 不依赖 DOM 层级关系：原方案 $(this).parent().next().show() 要求按钮必须严格嵌套在 .entry 内，且 .entry 必须连续排列；新方案通过统一索引控制，HTML 结构更自由（如中间插入广告 div 也不影响逻辑）。
- 内置越界保护：点击“Next”到最后一项、或“Back”到第一项时自动禁用操作，避免报错或空白页。
- 一次查询，多次复用：$entries 缓存所有目标元素，性能优于每次重复 DOM 查询。
- 清晰的状态管理：currentIndex 明确记录当前视图位置，便于后续扩展（如添加进度条、URL Hash 同步等）。
⚠️ 注意事项
- 确保 jQuery 已正确加载，且脚本置于 HTML 底部或包裹在 $(document).ready() 中，防止 DOM 未就绪导致选择器失效。
- 若页面含动态添加的 .entry，需在新增后重新初始化或改用事件委托（例如 $(document).on('click', '.next', ...)）。
- 如需纯原生 JS 版本（无 jQuery 依赖），可将 $entries 替换为 document.querySelectorAll('.entry')，并用 element.classList.toggle('hidden') 配合 CSS 类控制显隐，逻辑结构保持一致。
此方案兼顾简洁性与鲁棒性，是初学者快速落地、进阶者持续演进的理想起点。
