Javascript 创建上一个/下一个html页面导航

我有一系列的页面名为“第1页”、“第2页”、“第3页”…“第99页”。是否有一种方法可以进行导航，以便每当我单击“下一页”按钮时，它都会转到下一页，如果我单击“上一页”，它将转到上一页，具体取决于当前页码。我想知道是否有javascript解决方案，因为我从未使用过PHP

---

您可以使用

PHP

或

JS

实现这一点。但是在任何一种情况下，您首先需要能够以编程方式确定当前显示页面的页码

您提到的是

PHP

，这是

WordPress

还是其他类似的

CMS

好的，所以你提到这是一个基本的网站，但我们仍然需要能够拉那个currentPageID。我们可以用几种方法来实现这一点，最酷的可能是从url获取它，所以让我们这样做吧

---

要从您在注释

（hostname.com/page-1.html）

中提到的url结构中获取号码：

//让我们先抓取url并仅提取最后一段，以防url中的任何其他位置都有数字。
var url=window.location.href；
var数组=url.split（'/'）；
var lastSegmentOfUrl=array[array.length-1]；
//接下来，让我们对第一个数字或数字组的最后一段进行正则化
var reg=/\d+/；
var currentPageID=lastSegmentOfUrl.match（r）；//就这样！
//然后是一些基本的数学运算，得到下一页和上一页的页码
var previousPageID=currentPageID-1；
var nextPageID=currentPageID+1；
//最后，我们更改下一个和上一个元素的href值
document.getElementById（'previous'）.href（'/page-'+previousPageID+'.html'）；
document.getElementById（'next'）.href（'/page-'+nextPageID+'.html'）；

---

假设您的url结构保持不变，因为最后一个段只有当前页码，没有其他编号，并且下一个和上一个锚定标记ID不变，那么这将永远有效。

这应该让您开始（从原始代码开始）

$（'a[class^=page]'）。单击（函数（e）{
e、 预防默认值（）；
var num=this.className.split（'-'）[1]；//2
var nav=$（this.attr（'data-nav'）；
如果（导航==“下一步”）{
num=parseInt（num）+1；
//window.location.href=“page-”+num+'.html'；
}否则{
num--；
//window.location.href=“page-”+num+'.html'；
}
警报（'导航到：[page-'+num+'.html]'）；
});
a{填充：10px；边框：1px实心#ccc；边框半径：5px；文本装饰：无；}
这里是一个使用
location.pathname
和
String.prototype.replace
的方法，不需要额外的模板

更新包括在获取之前检查页面是否存在

// Check that a resource exists at url; if so, execute callback
function checkResource(url, callback){
    var check = new XMLHttpRequest();
    check.addEventListener("load", function(e){
        if (check.status===200) callback();
    });
    check.open("HEAD",url);
    check.send();
}

// Get next or previous path
function makePath(sign){
    // location.pathname gets/sets the browser's current page
    return location.pathname.replace(
        // Regular expression to extract page number
        /(\/page\-)(\d+)/,
        function(match, base, num) {
            // Function to increment/decrement the page number
            return base + (parseInt(num)+sign);
        }
    );
}
function navigate(path){ location.pathname = path; }

var nextPath = makePath(1), prevPath = makePath(-1);

checkResource(nextPath, function(){
    // If resource exists at nextPath, add the click listener
    document.getElementById('next')
        .addEventListener('click', navigate.bind(null, nextPath));
});
checkResource(prevPath, function(){
    // If resource exists at prevPath, add the click listener
    document.getElementById('prev')
        .addEventListener('click', navigate.bind(null, prevPath));
});

请注意，这将增加路径的“
page-n
”部分，即使您位于子路径中。它也适用于非html扩展

例如：

mysite.com/page-100/resource
=>
mysite.com/page-101/resource

或

mysite.com/page-100.php
=>
mysite.com/page-101.php
Jason，这不是一个CMS，我只想为一个基本的网站做一个。好的，我添加了一点关于从html检索id的内容，如果你把你的url结构传给我，我可能会用一个简单的正则表达式来检索当前的页码，但这两种解决方案都应该有效。hostname.com/page-1.htmlokay将其改为使用它。现在它不需要额外的html或其他任何东西。Jason，似乎每当我单击“上一步”或“下一步”时，它都会在URL的末尾添加一个“#”。我做错什么了吗？谢谢你说得对，我没有看到标签！转换为纯es5很简单，作为一个独立的解决方案不会有太大的作用。@gibberish每次添加页面时我都必须更改类吗？谢天谢地，在这种情况下，我必须更改每页的文件名。不，试试看。它从服务器上的文件中获取文件名。要使此代码准确工作，您必须使用名称
page-3.html
，
page-5.html
等保存页面。它不工作。它唯一有效的时候是当我在第2页，并且脚本中有fileName='page-2.html'时。我不知道为什么。谢谢，这很有趣。你知道一种制作阻止器的方法吗，这样每当没有更多的页面时，它就会停止导航？@Grigori“如何在获取资源之前验证资源是否存在”这一问题的一般解决方案是使用
XMLHttpRequest
发送HTTP
HEAD
请求，并检查响应是否在代码
404时失败（未找到），或在代码
200时成功。我将更新我的答案以包含此检查。我注意到它不起作用。在Mozilla中，虽然它可以工作，但一旦到达最后一页，我就无法返回了。@Grigori此代码是用普通es3编写的，在所有浏览器中都应该工作相同。如果您需要调试代码的帮助，则需要提供更多信息，包括任何
控制台
消息。
// Check that a resource exists at url; if so, execute callback
function checkResource(url, callback){
    var check = new XMLHttpRequest();
    check.addEventListener("load", function(e){
        if (check.status===200) callback();
    });
    check.open("HEAD",url);
    check.send();
}

// Get next or previous path
function makePath(sign){
    // location.pathname gets/sets the browser's current page
    return location.pathname.replace(
        // Regular expression to extract page number
        /(\/page\-)(\d+)/,
        function(match, base, num) {
            // Function to increment/decrement the page number
            return base + (parseInt(num)+sign);
        }
    );
}
function navigate(path){ location.pathname = path; }

var nextPath = makePath(1), prevPath = makePath(-1);

checkResource(nextPath, function(){
    // If resource exists at nextPath, add the click listener
    document.getElementById('next')
        .addEventListener('click', navigate.bind(null, nextPath));
});
checkResource(prevPath, function(){
    // If resource exists at prevPath, add the click listener
    document.getElementById('prev')
        .addEventListener('click', navigate.bind(null, prevPath));
});