使用jquery创建下一个/上一个HTML页面导航 [英] Create next/previous HTML page navigation with jquery

问题描述

我有一系列页面名为page-1page-2page-3...page-99等。我正在尝试创建导航，以便每当我点击下一步 按钮进入下一页，如果我点击上一页，它将转到上一页，具体取决于当前的页码。



我有HTML：

I have a series of pages named "page-1" "page-2" "page-3"... "page-99" etc. I am trying to create a navigation so that whenever I click the "next" button it goes to the next page, and if I click "previous" it will go to the previous page depending on what the current page number is.

I have the HTML:

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

和jQuery代码（来自Stackoverflow.com）：

and the jQuery code (from Stackoverflow.com):

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

出于某种原因，代码在Chrome中不起作用，而且部分在Mozilla中有效。我是jQuery的新手，我试图弄清楚为什么它在我实现它时不起作用。有什么想法吗？



谢谢



我尝试了什么： < br $> b $ b

我试图修复它，但我对jQuery很新，我很难理解这个问题。

For some reason the code does not work in Chrome and it partially work in Mozilla. I am very new to jQuery and I am trying to figure out why it does not work when I implement it. Any ideas ?

Thank you

What I have tried:

I have tried to fix it but I am very new to jQuery and it's hard for me to understand the problem.

推荐答案

试试这个

try this

var pageNamePattern = 'page'; // define the pattern of the html page name (http://www....../HtmlPage1.html)
       var firstPage = 1, lastPage = 10; // initialise the starting and ending page

（ function （）{
var next = GetNextPageNumber（）;
var nexturl = pageNamePattern + next + ' .html';
var prev = GetPrevPageNumber（）;
var prevurl = pageNamePattern + prev + < span class =code-string>' .html';
//

(function () { var next = GetNextPageNumber(); var nexturl = pageNamePattern + next + '.html'; var prev = GetPrevPageNumber(); var prevurl = pageNamePattern + prev + '.html'; //

（'＃next'）。click（function（）{window.location = nexturl}）;
//

('#next').click(function () { window.location =nexturl }); //

这篇关于使用jquery创建下一个/上一个HTML页面导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！