Question

I’m trying to set the current page to reflect in a main navigation bar. I’ve set a div in each page for JS / jQuery to check it’s the right page with the following code:

$(document).ready(function() {

  if ($('div').is('#example1-page')) {
    $("a#nav-example1").addClass('nav-example1-current');
    $("#nav-example1 p").css('display','block');
  } 
  else if ($('div').is('#example2-page')) {
    $("a#nav-example2").addClass('nav-example2-current');
    $("#nav-example2 p").css('display','block');
  }
  else if ($('div').is('#example3-page')) {
    $("a#example3").addClass('nav-example3-current');
    $("#nav-example3 p").css('display','block');
  }
});

I know there has to be a better way to do this with an array or something where I’m not repeating myself. Something where you can store the links IDs in an array and by clicking on the link with the right ID JS will know to set the current page in the navigation. I’m not sure where to start though.

Answer 1

Arrays of arrays are your friend :). Try this:

$(document).ready(function() {
    var pageCounter=3;
    var pages=[];
    for(var i=1;i<=pageCounter;i++){
        var selectors=["#example"+i+"-page",
                   "a#nav-example"+i,
                   "nav-example"+i+"-current",
                   "#nav-example"+i+" p"];
        pages.push(selectors);
    }

    for(var i=0;i<=pageCounter;i++){
         if ($('div').is(pages[i][0])) {
            $(pages[i][1]).addClass(pages[i][2]);
            $(pages[i][3]).css('display','block');
            break;
         }
    } 
});

Note: the logic to initialize the pages array does not need to be part of document.ready.