使用后退和下一个按钮在html页面之间切换

Question

This is my website http://www.damianplisko.com I want to have a previous and next button which switches between my html portfolio pages.If the user is on one of my porftfolio pages, all they have to do is click next and it takes them to the next portfolio page instead of maneuvering back to the main menu. Anyway to do this using js?

Answer 1

Since you're not using a CMS (which I recommend) the easiest solution I can think of without using AJAX or any external libraries is to create an array with all your pages in the order you want them displayed.

var pages = [
  'MedTech.html',
  'Trainer.html',
  'YoungGuns.html',
  ...
];

Then you can set the your new URL by grabbing the current page and checking which one is next.

var next = document.getElementById('next'); // your DOM element

next.addEventListener('click', function() {

  var current = location.pathname, // current page ie. MedTech.html
      idx = pages.indexOf( current ); // find page in pages array

  // go to next page if page exists
  // otherwise go to first page   
  if ( idx > -1 ) {
    location.pathname = pages[ ++idx ] || pages[0];
  }

});

For a "back" button you could simply use the history or adjust the function above.

Edit: you could get away without the idx > -1 check if you make sure all the pages in the array exist for sure.

Answer 2

Another way to do this with jquery is:

    var pages = ['page1.html', 'page2.html', 'page3.html'];

    $(".nav-button").on('click', function () {
        var currentPage = location.pathname,
            idx = pages.indexOf(currentPage),
            newIndex, failOver;
        if (idx > -1) {
            newIndex = $(this).hasClass("next") ? ++idx : --idx;
            failOver = $(this).hasClass("next") ? 0 : 2;
            location.pathname = pages[newIndex] || pages[failOver];
        }
    });