Question

how can i select the current link via jquery if I have a div like this:

<div id='navigation'>
  <a href='users/home'>home</a> |
  <a href='projects/browse'>home</a>
  <a href='discussions/browse'>home</a>
  <a href='search/dosearch'>home</a>
</div>

Note I’ve tried:

$(document).ready(function(){
    $("#navigation a").click( function(event)
    {
       var clicked = $(this); // jQuery wrapper for clicked element
       // ... click-specific code goes here ...
       clicked.addClass('selected');
    });
});

But when I click on a link it selects a link and adds the class .selected but it reloads the page in order to navigate to a page and then it all disappears. Any tips?

Thanks

Answer 1

This should work:

$(document).ready(function() {
    var loc = window.location.href; // The URL of the page we're looking at
    $('#navigation a').each(function() {
        if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor
            $(this).addClass('selected'); // Mark it as selected
        }
    });
});

It basically loops over the navigation items, and if the URL of the current page contains the href of the anchor, it adds the class selected to the anchor.