实现多页内容的按钮导航：使用 jQuery 控制 div 的显隐切换-html教程-PHP中文网

实现多页内容的按钮导航：使用 jQuery 控制 div 的显隐切换

本文介绍如何通过 jQuery 实现点击“Next”/“Back”按钮在多个 .entry 容器间平滑切换，避免依赖脆弱的 DOM 结构，提升代码健壮性与可维护性。

本文介绍如何通过 jquery 实现点击“next”/“back”按钮在多个 `.entry` 容器间平滑切换，避免依赖脆弱的 dom 结构，提升代码健壮性与可维护性。

在构建分步式内容页面（如博客章节、表单向导或教程页）时，常需隐藏除当前项外的所有内容，并通过按钮控制浏览流程。你最初的思路——用 $(this).parent().hide().next().show() ——逻辑正确，但极易失效：一旦 HTML 结构稍有变动（例如按钮嵌套加深、中间插入其他元素、或 .entry 之间存在空白节点），.next() 就可能选中非目标元素，导致功能中断。

更可靠的做法是脱离 DOM 邻居关系，改用索引驱动。我们预先获取所有 .entry 元素集合，用一个变量（如 entryIndex）记录当前显示项的序号，每次点击时仅更新索引并统一控制显隐状态。这种方式结构解耦、语义清晰，且天然支持任意数量的条目。

以下是完整、可直接运行的实现方案：

<!-- 引入 jQuery（推荐使用 CDN） -->
<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><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 按钮逻辑：前进一页（需防止越界）
$('.next').on('click', function() {
  if (currentIndex  0) {
    currentIndex--;
    $entries.hide().eq(currentIndex).show();
  }
});

✅ 关键优化说明：