Question

I’m extremely new with jQuery and I would like make sure I’m writing it correctly. I would like to start understanding how to write less much as possible. I think the following should be in a .each() function, but I’m not sure. That’s why I coding it into if statements.

HTML:

            <div id="header" class="container">
          <div class="row">
            <div class="sixcol"> <a href="#"><img src="http://dermdev3/sites/Dermatology/images/logo/derm_header_penn_logo.png" alt="Penn Medicine - Dermatology Header Logo" name="logo" width="363" height="103" id="logo"></a></div>
            <div class="sixcol last">
              <ul id="navigation">
                <li><a class="navy" href="#" title="Home">Home</a></li>
                <li><a class="red" href="#" title="Link">Link</a></li>
                <li><a class="yellow" href="#" title="Link">Link</a></li>
                <li><a class="light-blue" href="#" title="Link">Link</a></li>
              </ul>
            </div>
          </div>
        </div>

Jquery:

$(function () {
//Webpages
var home = "Home.hmtl";
var wiki = "Wiki.html";

//Main Navigation
var header = $("div#header");
var colors = "navy red yellow light-blue";
var nav = $("#navigation");
var navList = $("#navigation li");

if (pathname == wiki) {
    header.addClass("red");
    $("#navigation a.red").attr("id", "current");

    navList.children().mouseenter(function () {
        $("#navigation a.red").removeAttr("id", "current");
    });

    nav.mouseleave(function () {
        header.removeClass(colors).addClass("red");
        $("#navigation a.red").attr("id", "current");
    });
}
if (pathname == home) {
    header.addClass("navy");
    $("#navigation a.navy").attr("id", "current");

    navList.children().mouseenter(function () {
        $("#navigation a.navy").removeAttr("id", "current");
    });

    nav.mouseleave(function () {
        header.removeClass(colors).addClass("navy");
        $("#navigation a.navy").attr("id", "current");
    });
}

});

Answer 1

var pages = {
   "Wiki.html": {
      "className": "navy",
   },
   "Home.html": {
      "className": "red"
   }
   // add other pages here.
};

var header = $("div#header");
var colors = "navy red yellow light-blue";
var nav = $("#navigation");
var navList = $("#navigation li");

function configure(page){
    var anchors = function(){
       return nav.find("a."+page.className);
    }
    header.addClass(page.className);
    anchors().attr("id", "current");

    navList.children().mouseenter(function () {
        anchors().removeAttr("id", "current");
    });

    nav.mouseleave(function () {
        header.removeClass(colors).addClass(page.className);
        anchors().attr("id", "current");
    });
}

Then call it:

configure(pages[pathname]);