如何用JavaScript实现当前URL末尾数字±1的导航链接？

没问题！这个需求用JavaScript完全能实现，而且代码简单到你直接复制粘贴就能用，不用懂复杂的JS逻辑。我给你拆成几个部分，你跟着做就行：

第一步：添加跳转按钮（HTML） #

先把下面的按钮代码放到你页面的合适位置（比如页面底部，方便用户点击的地方）：

<div class="nav-buttons">
  <button id="prevPage">← 上一页</button>
  <button id="nextPage">下一页 →</button>
</div>

第二步：给按钮加个简单样式（可选） #

如果想让按钮看起来好看点，把这段CSS代码放到你HTML的<head>标签里的<style>中（没有的话就新建一个<style>标签）：

.nav-buttons {
  margin: 30px 0;
  display: flex;
  gap: 15px;
  justify-content: center;
}

.nav-buttons button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.nav-buttons button:hover {
  background-color: #0056b3;
}

第三步：核心跳转逻辑（JavaScript） #

最后把这段JS代码放到你HTML页面的</body>标签前面（也就是页面内容的最后面），这样它能正确找到按钮：

// 获取当前页面的完整URL
const currentUrl = window.location.href;

// 用正则匹配URL末尾的数字（比如.../101里的101）
const numberMatch = currentUrl.match(/\/(\d+)$/);

// 如果匹配到了数字，就绑定跳转事件
if (numberMatch) {
  // 把匹配到的字符串数字转成整数
  const currentPageNum = parseInt(numberMatch[1]);
  
  // 上一页按钮点击事件
  document.getElementById('prevPage').addEventListener('click', () => {
    const prevPageNum = currentPageNum - 1;
    // 替换原URL末尾的数字，生成上一页的URL
    const prevUrl = currentUrl.replace(/\/\d+$/, `/${prevPageNum}`);
    // 跳转到上一页
    window.location.href = prevUrl;
  });
  
  // 下一页按钮点击事件
  document.getElementById('nextPage').addEventListener('click', () => {
    const nextPageNum = currentPageNum + 1;
    const nextUrl = currentUrl.replace(/\/\d+$/, `/${nextPageNum}`);
    window.location.href = nextUrl;
  });
} else {
  // 如果当前页面URL末尾没有数字，就隐藏按钮（避免无效点击）
  document.querySelector('.nav-buttons').style.display = 'none';
  // 也可以换成提示：alert('当前页面不是系列页面，无法跳转');
}

一些可选优化（按需修改） #

• 限制最小页面：如果你的系列页面从101开始，不想让用户跳到100及以下，可以修改上一页的逻辑：

  document.getElementById('prevPage').addEventListener('click', () => {
    const prevPageNum = currentPageNum - 1;
    // 这里把101改成你的最小页面编号
    if (prevPageNum >= 101) {
      const prevUrl = currentUrl.replace(/\/\d+$/, `/${prevPageNum}`);
      window.location.href = prevUrl;
    } else {
      alert('已经是第一页啦！');
    }
  });
  

• 自定义按钮文字：直接修改HTML里按钮的内容就行，比如把“上一页”改成“Previous”。

这样就搞定啦！你只需要把这些代码复制粘贴到对应的位置，打开你的系列页面就能用上一页/下一页按钮跳转了。

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