Javascript:转到上一页/下一页

Javascript: Go to previous/next page

本文关键字：一页 Javascript      更新时间：2023-09-26

假设我有三个html页面：第1页、第2页和第3页。当我单击第1页上的"下一步"时，它会转到第2页，当我单击下一步时，它将转到第3页，当我们单击下一个时，它将会转到第1页。反之亦然，当我点击第3页上的PREVIOUS时，它会转到2；在2上，它变为1；1转到3。现在说我想添加第4页。不必进入HTML页面，将第3页上的NEXT链接更改为第4页，将第1页上的PREVIOUS链接更改为"第4页"，我是否可以编写某种脚本（Javascript），这样当您单击"下一步"时，它会自动查看页码和增量，或者转到第1页，反之亦然，以单击"上一步"？如有任何帮助，我们将不胜感激！

对最小值应为1、最大值应为X的数字进行递增的一般公式为：

n = (n % X) + 1;

递减该数字的通用公式为：

n = ((n + X + 1) % X) + 1;

因此，如果n是当前页码，而X是3（对于三页）。。。

示例：Live Copy

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <input type="button" id="btnPrev" value="Previous">
  <input type="button" id="btnNext" value="Next">
<script>
  (function() {
    "use strict";
    var page = 1;
    var pageCount = 3;
    display("Starting page: " + page);
    document.getElementById("btnPrev").onclick = function() {
      page = ((page + pageCount + 1) % pageCount) + 1;
      display("previous, page now " + page);
    };
    document.getElementById("btnNext").onclick = function() {
      page = (page % pageCount) + 1;
      display("next, page now " + page);
    };
    function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = String(msg);
      document.body.appendChild(p);
    }
  })();
</script>
</body>
</html>

您可以更好地使用页面名称数组来实现这一点，因为页面数量有限。

类似：-

var pageArray = ["page1.html", "page2.html","page3.html"];
function next(){
    var hr = window.location.href.splitOnLast("/");
    var page=hr[1].replace("/","");
    var nxtIndex =  pageArray.indexOf(page) + 1 ;
    if(nxtIndex > pageArray.length) nxtIndex=0;
    var redirect = hr[0]+"/"+pageArray[nxtIndex];
    window.location.href=redirect;
}
function prev(){
    var hr = window.location.href.splitOnLast("/");
    var page=hr[1].replace("/","");
    var nxtIndex =  pageArray.indexOf(page) - 1 ;
    if(nxtIndex < 0) nxtIndex=pageArray.length-1;
    var redirect = hr[0]+"/"+pageArray[nxtIndex];
    window.location.href=redirect;
}

通过使用此方法，您不必使用严格的编号，并且可以在列表中的任何位置自由添加新页面。

这种方法的另一个优点是，您可以进一步开发它，并在不同项目中的任何地方使用，包括完全由数据库驱动的菜单、网站和导航系统。

这种方法唯一的缺点是，它可以将当前导航中的所有页面名称一次性显示给任何了解JavaScript的人，尽管我们从未打算向最终用户隐藏我们的页面名称。

编辑我忘记在重定向代码中添加"/"。

相关文章：