如何基于现有Div数组实现上一页、下一页导航功能（无需新增按钮）

嘿，刚接触JS的话确实容易在这种导航逻辑上卡壳，我懂你的感受！你现在First和Latest能工作，就差Back和Next，而且不想新增按钮，咱们直接在你现有的代码基础上改就行，一步步来：

第一步：给Back和Next绑定点击事件 #

先修改HTML里Back和Next对应的<a>标签，给它们加上点击触发的事件，让点击时能调用对应的JS逻辑：

<a href="#" onClick="goBack()">&nbsp;&nbsp;&nbsp;Back&nbsp;&nbsp;&nbsp;</a> /
<a href="#" onClick="goNext()">&nbsp;&nbsp;&nbsp;Next&nbsp;&nbsp;&nbsp;</a> /

第二步：重构JS逻辑，实现上/下一页功能 #

原来的代码已经有了基础的页面显示/隐藏逻辑，我们把重复代码抽成通用函数，再补充上一页、下一页的计算逻辑，这样维护起来更简单：

var divs = ["Page1", "Page2", "Page3"];
// 初始显示Page1，和HTML默认状态保持一致
var visibleDivId = "Page1";

// 通用函数：显示指定ID的div，隐藏其他所有div
function showDiv(targetDivId) {
  visibleDivId = targetDivId;
  // 遍历所有div，控制显示/隐藏状态
  divs.forEach(divId => {
    const div = document.getElementById(divId);
    div.style.display = divId === targetDivId ? "block" : "none";
  });
}

// 回到上一页逻辑
function goBack() {
  // 获取当前页面在数组中的位置索引
  const currentIndex = divs.indexOf(visibleDivId);
  // 如果不是第一页，就切换到前一个页面
  if (currentIndex > 0) {
    showDiv(divs[currentIndex - 1]);
  }
}

// 跳转到下一页逻辑
function goNext() {
  const currentIndex = divs.indexOf(visibleDivId);
  // 如果不是最后一页，就切换到下一个页面
  if (currentIndex < divs.length - 1) {
    showDiv(divs[currentIndex + 1]);
  }
}

// 兼容原来的divVisibility函数，统一调用通用的showDiv
function divVisibility(divID) {
  showDiv(divID);
}

第三步：替换代码测试效果 #

把上面的JS代码替换你原来的JS部分，HTML部分修改Back和Next的a标签后，四个导航按钮就都能正常工作了：

• First：直接跳转到Page1
• Back：从当前页往前翻，到第一页就不再切换
• Next：从当前页往后翻，到最后一页就不再切换
• Latest：直接跳转到数组里的最后一个页面（以后加Page4的话，只要把divs数组改成["Page1", "Page2", "Page3", "Page4"]，Latest会自动跳到Page4）

这样改的好处是逻辑清晰，以后扩展页面只需要修改divs数组和对应的HTML div就行，不用动导航逻辑~

备注：内容来源于stack exchange，提问作者Millani Jones.C