如何用JavaScript实现网站多页面的前进/后退按钮跳转

AI 小北

2026-7-26

页面跳转解决方案

核心思路

通过JavaScript统一管理页面顺序，根据当前页面位置触发跳转，替代传统<a>标签的href属性，规避跳转异常问题。

实现步骤

假设你的页面顺序为：page1.html → page2.html → page3.html → page4.html → page5.html，按以下方式在每个页面添加代码：

添加按钮元素（可直接复用你已设计好的按钮样式）：

<button id="backBtn">返回</button>
<button id="nextBtn">下一页</button>

添加JavaScript逻辑（所有页面直接复用这段代码即可）：

// 定义所有页面的路径顺序，确保和实际文件路径完全匹配
const pageOrder = ['page1.html', 'page2.html', 'page3.html', 'page4.html', 'page5.html'];

// 获取当前页面的文件名
const currentPageName = window.location.pathname.split('/').pop();
// 定位当前页面在顺序数组中的索引
const currentIndex = pageOrder.indexOf(currentPageName);

// 下一页跳转逻辑
document.getElementById('nextBtn').addEventListener('click', () => {
  if (currentIndex < pageOrder.length - 1) {
    // 使用replace替换当前历史记录，避免生成重复历史条目；若需保留完整历史，可改用window.location.href = ...
    window.location.replace(pageOrder[currentIndex + 1]);
  }
});

// 上一页跳转逻辑
document.getElementById('backBtn').addEventListener('click', () => {
  if (currentIndex > 0) {
    window.location.replace(pageOrder[currentIndex - 1]);
  }
});

// 初始化按钮状态：第一页禁用返回按钮，最后一页禁用下一页按钮
if (currentIndex === 0) {
  document.getElementById('backBtn').disabled = true;
} else if (currentIndex === pageOrder.length - 1) {
  document.getElementById('nextBtn').disabled = true;
}