Question

我有一系列名为“page-1”“page-2”“page-3”......“page-99”的页面。有没有办法进行导航，这样每当我点击“下一步”按钮它就会转到下一页，如果我点击“上一页”，它将转到上一页，具体取决于当前页码。我想知道是否有一个javascript解决方案，因为我从未使用过PHP。

<a href="#" id="next">next</a> <!--it will go to page-3-->
<a href="#" id="prev">previous</a> <!--it will go to page-1-->

Answer 1

您可以使用PHP或JS执行此操作。但无论哪种情况，您首先需要能够以编程方式确定当前显示页面的页码。

您提到PHP，这是WordPress还是其他类似的CMS？

好的，所以你提到这是一个基本的网站，但我们仍然需要能够拉出那个currentPageID。我们可以通过几种方式做到这一点，最酷的可能就是从网址中获取它，所以让我们这样做。

要从评论(hostname.com/page-1.html)中提及的网址结构中获取数字：

// Let's first grab the url and pull just the last segment, in case there are numbers anywhere else in the url.
var url = window.location.href;
var array = url.split('/');
var lastSegmentOfUrl = array[array.length-1];

// Next, let's regex that last segment for the first number or group of numbers
var reg = /\d+/;
var currentPageID = lastSegmentOfUrl.match(r); // That's it!

// Then some basic math to get the next and previous page numbers
var previousPageID = currentPageID - 1;
var nextPageID = currentPageID + 1;

// And finally we change the href values on the next and previous <a> elements
document.getElementById('previous').href('/page-' + previousPageID + '.html');
document.getElementById('next').href('/page-' + nextPageID + '.html');

这将永远保持工作，假设您的网址结构保持不变，只要最后一个网段只有当前页码而没有其他数字，并且下一个和之前的锚标记ID不会变化

Answer 2

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

$('a[class^=page]').click(function(e){
   e.preventDefault();
   var num = this.className.split('-')[1]; //2
   var nav = $(this).attr('data-nav');
   if (nav == 'next'){
         num = parseInt(num)+1;
         //window.location.href = "page-"+num+'.html';
   }else{
         num--;
         //window.location.href = "page-"+num+'.html';
   }
  alert('Navigating to: [ page-' +num+ '.html ]');
});

a{padding:10px;border:1px solid #ccc;border-radius:5px;text-decoration:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" class="page-2" data-nav="next">next</a> <!--it will go to page-3-->
<a href="#" class="page-2" data-nav="prev">previous</a> <!--it will go to page-1-->

当然，这会更容易：

$('a[class^=page]').click(function(e){
   e.preventDefault();
   var num = this.className.split('-')[1]; //2
  
   //window.location.href = "page-"+num+'.html'; //The "real" code
  alert('Navigating to: [ page-' +num+ '.html ]'); //For demo purposes only
});

a{padding:10px;border:1px solid #ccc;border-radius:5px;text-decoration:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" class="page-1" >next</a> <!--it will go to page-3-->
<a href="#" class="page-3" >previous</a> <!--it will go to page-1-->

这是最简单的（使用文件名）：

//className *starts with* nav-
$('[class^=nav-]').click(function(e){
   e.preventDefault();
   var fileName = location.pathname.split("/").slice(-1);
   var fileName = 'http://page-2.html'; //FOR DEMO ONLY
      //alert(fileName); //should respond page2.html
   var num = fileName.split('-')[1]; //2
   var nav = this.className.split('-')[1]; //next
   if (nav == 'next'){
         num = parseInt(num)+1;
         //window.location.href = "page-"+num+'.html';
   }else{
         num = parseInt(num)-1;
         //window.location.href = "page-"+num+'.html';
   }

alert('Navigating to: [ page-' +num+ '.html ]'); //For demo purposes only

});

a{padding:10px;border:1px solid #ccc;border-radius:5px;text-decoration:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" class="nav-next" >next</a> <!--it will go to page-3-->
<a href="#" class="nav-prev" >previous</a> <!--it will go to page-1-->

Answer 3

以下是使用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));
});

请注意，这会增加＆＃34; page-n＆＃34;路径的一部分，即使您在子路径中。它也适用于非HTML扩展。

E.g，：

mysite.com/page-100/resource =＆gt; mysite.com/page-101/resource

或

mysite.com/page-100.php =＆gt; mysite.com/page-101.php

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

3 个答案: