点击按钮切换同页面div显示/隐藏的实现问题求助

你的代码逻辑本身是正确的，但没生效主要有两个常见原因：未引入jQuery库，或者事件绑定时机过早（DOM还没加载完成就执行了JS代码）。以下是修正后的完整实现：

步骤1：引入jQuery并确保代码执行时机正确 #

首先要在页面中引入jQuery库（建议使用本地版本，避免依赖外部链接），然后将你的JS代码放在$(document).ready()回调中，确保DOM元素全部加载完成后再绑定事件。

完整代码实现 #

CSS #

.entry {
  text-align: left;
  padding: 0 10px 1px;
  font-size: 15px;
  font-family: Book Antiqua;
  width: 550px;
  height: 500px;
  overflow: auto;
  margin: auto;
}

HTML #

<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>
  <button class="next">Next</button>
</div>

<!-- 引入本地jQuery库 -->
<script src="./jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('.next').click(function(){
    const currentEntry = $(this).parent();
    const nextEntry = currentEntry.next('.entry');
    if (nextEntry.length) {
      currentEntry.hide();
      nextEntry.show();
    }
    // 可选：最后一个div的Next按钮可以添加提示或禁用
    // else { alert('已到最后一页'); }
  });

  $('.back').click(function(){
    const currentEntry = $(this).parent();
    const prevEntry = currentEntry.prev('.entry');
    if (prevEntry.length) {
      currentEntry.hide();
      prevEntry.show();
    }
  });
});
</script>

额外优化说明 #

• 加入了.entry选择器的过滤（next('.entry')/prev('.entry')），避免页面中其他同级元素干扰切换逻辑
• 添加了存在性判断（if (nextEntry.length)），防止点击最后一个div的Next按钮时出现无效操作
• 可以给最后一个div的Next按钮添加禁用状态或提示，提升用户体验

非JS方案补充（CSS :target） #

如果想尝试非JS方案，可以利用CSS的:target伪类，但灵活性不如JS：

<div class="entry-container">
  <div id="entry1" class="entry">
    <p>paragraph text 1</p>
    <a href="#entry2">Next</a>
  </div>

  <div id="entry2" class="entry" style="display:none;">
    <p>paragraph text 2</p>
    <a href="#entry1">Back</a>
    <a href="#entry3">Next</a>
  </div>

  <div id="entry3" class="entry" style="display:none;">
    <p>paragraph text 3</p>
    <a href="#entry2">Back</a>
  </div>
</div>

<style>
.entry:target {
  display: block !important;
}
.entry:not(:target) {
  display: none;
}
/* 初始显示第一个 */
#entry1 {
  display: block;
}
</style>

但这种方案依赖锚点跳转，URL会变化，且无法处理复杂逻辑，还是JS方案更高效灵活。

内容的提问来源于stack exchange，提问作者Jay