Add active class to current page navigation link

Question

Hi I need help making my navigation show the active link highlighted on current page. In other words when I click on a link to go to a new page I want to see that link highlighted after the new page is opened. I could handle this with CSS by adding a class to the active link on each page but since there's going to be many pages I would prefer to do this dynamically with JS.

How can I do that with Javascript?... I will appreciate your help, thanks.

Below is the code I'm using feel free to edit as you think convenient.

Here is the HTML, is just a list to structure the navigation

<ul class="menu collapsible">
    <li id="main">
        <a href="http://google.com">About SfT</a>
        <ul class="acitem">
            <li><a href="page1.html">page1</a></li>
            <li><a href="page2.html">page2</a></li>
            <li><a href="http://www.textpattern.com/">Textpattern</a></li>
            <li><a href="http://typosphere.org/">Typo</a></li>
        </ul>
    </li>
    <li>
        <a id="main" href="#">Your Life</a>
        <ul class="acitem">
            <li><a href="page3.html">page3</a></li>
            <li><a href="">Ruby</a></li>
            <li><a href="">Python</a></li>
            <li><a href="">PERL</a></li>
            <li><a href="http://java.sun.com/">Java</a></li>
            <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
        </ul>
    </li>
    <li>
            <a id="main" href="">Your Health</a>
        <ul class="acitem">
            <li><a href="http://bookalicio.us/">Bookalicious</a></li>
            <li><a href="http://www.apple.com/">Apple</a></li>
            <li><a href="http://www.nikon.com/">Nikon</a></li>
            <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
            <li><a href="http://www.nintendo.com/">Nintendo</a></li>
        </ul>
    </li>
    <li>
        <a id="main" href="#">Your Call</a>
        <ul class="acitem">
            <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
            <li><a href="http://www.google.com/">Google</a></li>
            <li><a href="http://www.ask.com/">Ask.com</a></li>
            <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
        </ul>
    </li>
</ul>

The CSS (very mininmal, just for the purpose of testing):

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}

p {
    line-height: 1.5em;
}
#main {font-size:2em;}

ul.menu, ul.menu ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    width: 15em;
}

ul.menu a {
    display: block;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 2em;
}

ul.menu li {
  margin-top: 1px;
}

ul.menu li a, ul.menu ul.menu li a {
    color: #666;
    padding: 0.5em;
    font-weight: bold;
    font-size: 1em;
}

ul.menu li a:hover, ul.menu ul.menu li a:hover {
    color: #900;

}

ul.menu li ul li a, ul.menu ul.menu li ul li a {
    color: #999;
    padding-left: 20px;
}

ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
    color: #900;
}
ul.menu ul.menu li a:hover {
    border-left: 0;
    padding-left: 0.5em;
}
ul.menu ul.menu {
    border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
    color: #900;
}
div.panel {
    border: 1px #000 solid;
    padding: 5px;
    margin-top: 1px;
}

ul.menu div.panel a, ul.menu div.panel li a:hover  {
    display :inline;
    color: #090;
    margin: 0;
    padding: 0;
    font-weight: bold;
}
ul.menu div.panel a:hover {
    color: #900;
}


.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }
.indent6 { padding-left: 6em; }
.indent7 { padding-left: 7em; }
.indent8 { padding-left: 8em; }
.indent9 { padding-left: 9em; }
.indent10 { padding-left: 10em; }

The JavaScript:

jQuery.fn.initMenu = function() {  
    return this.each(function(){
        var theMenu = $(this).get(0);
        $('.acitem', this).hide();
        $('li.expand > .acitem', this).show();
        $('li.expand > .acitem', this).prev().addClass('active');
        $('li a', this).click(
            function(e) {
                e.stopImmediatePropagation();
                var theElement = $(this).next();
                var parent = this.parentNode.parentNode;
                if($(parent).hasClass('noaccordion')) {
                    if(theElement[0] === undefined) {
                        window.location.href = this.href;
                    }
                    $(theElement).slideToggle('normal', function() {
                        if ($(this).is(':visible')) {
                            $(this).prev().addClass('active');
                        }
                        else {
                            $(this).prev().removeClass('active');
                        }    
                    });
                    return false;
                }
                else {
                    if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                        if($(parent).hasClass('collapsible')) {
                            $('.acitem:visible', parent).first().slideUp('normal', 
                            function() {
                                $(this).prev().removeClass('active');
                            }
                        );
                        return false;  
                    }
                    return false;
                }
                if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                    $('.acitem:visible', parent).first().slideUp('normal', function() {
                        $(this).prev().removeClass('active');
                    });
                    theElement.slideDown('normal', function() {
                        $(this).prev().addClass('active');
                    });
                    return false;
                }
            }
        }
    );
});
};

$(document).ready(function() {$('.menu').initMenu();});

Answer 1

To do this, you'd need to be able to compare some unique element in each link with some other unique element of the page (such as the URL).

Looking at what you have, you might be able to get away with comparing the URLs. You'd have to grab the current' page's location, parse the URL to get the file name (last part of the URL after the last /) and then go through each href of your navigation, parse each one of those, then make a comparison. If there's a match, add a class to that link.

The catch with this is that this isn't the most performant way to handle it. The other issue is if you happen to have two pages on the site with the same file name (which isn't unheard of).

I think uniquely identifying each page with a unique class in the BODY tag is probably the best way to handle it.

So, perhaps your body tag is:

<body class="page-contactus">

And then add a class to your navigation:

<li><a href="contact.html" class="link-contactus">Contact us</a></li>

Then you'd have a block of CSS that will set these on a per-page basis:

.page-contactus .link-contactus {[add active style]}
.page-home .link-home {[add active style]}
.page-etc .link-etc {[add active style]}