HTML 实现按升序排列的下一页跳转-js教程-PHP中文网

html 实现按升序排列的下一页跳转

本文将介绍如何使用 JavaScript 在 HTML 文件中实现一个“下一页”按钮，该按钮能够按照文件名（假设文件名是按日期升序排列的）的升序顺序跳转到下一个 HTML 文件。即使文件名不是连续的，也能正确跳转到下一个文件。我们将提供一个示例代码，帮助你理解和实现这个功能。

实现原理

核心思路是利用 JavaScript 获取当前页面的文件名，然后在一个预定义的数组中查找当前文件名，找到其索引。根据索引计算出下一个文件的索引，并最终获取下一个文件的文件名。如果当前页面是最后一个文件，则跳转到数组的第一个文件，实现循环跳转。

具体步骤

获取当前文件名: 使用 location.pathname 获取当前页面的完整路径，然后使用 split('/') 将路径分割成数组，最后使用 pop() 方法获取数组的最后一个元素，即文件名。
定义文件名数组: 创建一个包含所有 HTML 文件名的数组。这个数组需要按照文件名的升序排列。
查找当前文件索引: 使用 indexOf() 方法在文件名数组中查找当前文件名的索引。

创意扇形排列卡片画廊
基于“创意扇形排列卡片画廊”制作的前端特效源码，包含扇形卡片、旋转展开、层级聚焦、键盘切换，打开 index.html 即可直接查看效果，可替换标题、颜色和图形元素复用。下载包已经整理好特效舞台、样式变量、动画规则和必要脚本，适合用于学习当前效果的实现方式，也方便替换文字、颜色、图形或图片后直接复用。

下载
计算下一个文件索引: 将当前文件索引加 1，然后使用取模运算符 % 计算下一个文件的索引。这样可以确保当当前页面是最后一个文件时，下一个索引会回到 0，实现循环跳转。
获取下一个文件名: 使用计算出的索引从文件名数组中获取下一个文件名。
创建“下一页”链接: 创建一个 HTML 链接，将其 href 属性设置为下一个文件的文件名。

示例代码



  <title>Next Page</title><h1>Current Page</h1>

  <a id="nextPageLink" href="#">Next Page</a>

  <script>
    // 获取当前文件名
    let currentFileName = location.pathname.split('/').pop();

    // 文件名数组
    let fileNames = [
      '230512.html',
      '230519.html',
      '230530.html',
      '230630.html',
      '240120.html'
    ];

    // 查找当前文件索引
    let currentIndex = fileNames.indexOf(currentFileName);

    // 计算下一个文件索引
    let nextIndex = (currentIndex + 1) % fileNames.length;

    // 获取下一个文件名
    let nextFileName = fileNames[nextIndex];

    // 设置“下一页”链接
    let nextPageLink = document.getElementById('nextPageLink');
    nextPageLink.href = nextFileName;
  </script>

代码解释:

currentFileName = location.pathname.split('/').pop();：获取当前页面的文件名。
fileNames = [...]：定义一个包含所有 HTML 文件名的数组。请确保这个数组按照文件名的升序排列。
currentIndex = fileNames.indexOf(currentFileName);：找到当前文件名在数组中的索引。
nextIndex = (currentIndex + 1) % fileNames.length;：计算下一个文件的索引，使用取模运算符确保循环跳转。
nextFileName = fileNames[nextIndex];：获取下一个文件名。
nextPageLink.href = nextFileName;：设置“下一页”链接的 href 属性，使其指向下一个文件。

注意事项

文件名数组: fileNames 数组必须按照文件名的升序排列，否则“下一页”按钮将无法正确跳转。
路径问题: location.pathname 获取的是包含路径的文件名。如果 HTML 文件不在根目录下，你需要根据实际情况调整 location.pathname.split('/').pop() 的代码，或者直接在 fileNames 数组中使用相对路径。
动态文件名: 如果文件名是动态生成的，你需要动态更新 fileNames 数组。
错误处理: 建议添加错误处理机制，例如当 currentFileName 不在 fileNames 数组中时，给出相应的提示。