Create previous/next html page navigation

Question

I have a series of pages named "page-1" "page-2" "page-3" ..."page-99". Is there a way to make 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 was wondering if there is a javascript solution to this since I have never used 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

Here is a method using location.pathname and String.prototype.replace, no extra templating required!

Update Includes check that page exists before fetching.

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

Note that this will increment the "page-n" portion of the path, even if you are in a sub-path. It will also work for non-html extensions.

E.g.,:

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

or

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

Answer 2

You can do this with PHP or JS. But in either case you first need to be able to programmatically determine the page number of the currently displayed page.

You mention PHP, is this WordPress or some other similar CMS?

Okay so you mentioned that this is a basic website, but we still need to be able to pull that currentPageID. We could do this a few ways, the coolest would probably be to take it from the url, so let's do that.

To get the number from the url structure you mention in comments (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');

This will keep working forever assuming your url structure stays the same insofar as the last segment only has the current page number and no other numbers, and also that the next and previous anchor tags ID's don't change.

Answer 3

This should get you started (starting with your original code).

$('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-->

---

Of course, this would be easier:

$('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-->

And this would be easiest (using the file name):

//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-->