創建上一個/下一個html頁面導航

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。 我們可以通過幾種方法來完成此操作，最酷的方法可能是從URL中獲取它，所以讓我們開始吧。

要從您在注釋(hostname.com/page-1.html)提到的url結構中獲取數字：

// 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');

假設您的url結構保持不變，因為最后一個段僅具有當前頁碼，沒有其他編號，並且下一個和上一個錨標記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));
});

請注意，即使您在子路徑中，這也會增加路徑的“ page-n ”部分。 它也適用於非html擴展名。

例如，：

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

要么

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