CODEWITHSUNDEEP
javascripthtml
user1911716
user1911716

Reputation: 31

Switching between html pages using a back and next button

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?

Upvotes: 3

Views: 2532

Answers (2)

gimiarn1801
gimiarn1801

Reputation: 131

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

Upvotes: 0

elclanrs
elclanrs

Reputation: 94141

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.

Upvotes: 2

Related Questions