Question

I am currently trying to make a navigation-menu where an active-class is applied to the anchors whose href attributes that match the current URL, so I can style that anchor in a way that makes it stand out from the rest of the menu.

This is my mark-up:

<div id='sidebar'>    <h2>Navigation menu</h2>   <h2 class='subnav'><a href='menu1/menu_item1'>Menu item 1</a></h2>   <h2 class='subnav'><a href='menu1/menu_item2'>Menu item 2</a></h2>   <h2 class='subnav'><a href='menu1/menu_item3'>Menu item 3</a></h2>   <h2 class='subnav'><a href='menu1/menu_item4'>Menu item 4</a></h2>   <h2 class='subnav'><a href='menu1/menu_item5'>Menu item 5</a></h2>  </div>  

This is the jQuery:

   jQuery(function($) {        // get the current url       var path = location.pathname.substring(1);         // defining the top subnav anchor       var $top_item = $('#sidebar h2:nth-child(2) a');         // defining all subnav anchors       var $all_items = $('#sidebar h2.subnav a');         // defining the anchors with a href that matches the current url       var $selected_item = $('#sidebar h2 a[@href$='' + path + '']');         // setting the selected menu item'class as active       $selected_item.addClass('active');         // THIS IS WHERE I THINK THE ERROR IS       // if none of the h2.subnav's has a url that matches        // the current location then assume that it's the top one that's active:       if ($all_items('href') !== path) $top_item.addClass('active');    }); 

I am applying the active-class with jQuery, it works fine as long as there is a match between an anchors href and the location url. If the url don’t match any of the anchors I want the active-class to be applied to the $top_item. That part of my jQuery doesn’t work.

I can’t see what the error is, but then again I’m somewhat of a Javascript/jQuery n00b. Any help would be appreciated.

Answer 1

This should do want you want: mark the matching link, and failing that, mark your default one.

function markActiveLink() {      //Look through all the links in the sidebar    $('div#sidebar a').filter(function() {        //Take the current URL and split it into chunks at each slash       var currentURL = window.location.toString().split('/');        //return true if the bit after the last slash is the current page name       return $(this).attr('href') == currentURL[currentURL.length-1];      //when the filter function is done, you're left with the links that match.     }).addClass('active');     //Afterwards, look back through the links. If none of them were marked,    //mark your default one.    if($('div#sidebar a').hasClass('active') == false) {       $('div#sidebar h2:nth-child(2) a').addClass('active');     }  }  markActiveLink(); 

Also, I found an official tutorial on this on the jQuery Docs site – scroll to the bottom to see the jQuery code. It’s tighter than mine, although it’s not tailored to your situation.