title: Active navigation with jQuery - can't apply a default class to anchor
body: <p>I am currently trying to make a <code>navigation-menu</code> where an <code>active-class</code> is applied to the anchors whose <code>href</code> 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.</p>
  
  <p>This is my mark-up:</p>
  
  <pre><code>&lt;div id="sidebar"&gt;
  
    &lt;h2&gt;Navigation menu&lt;/h2&gt;
    &lt;h2 class="subnav"&gt;&lt;a href="menu1/menu_item1"&gt;Menu item 1&lt;/a&gt;&lt;/h2&gt;
    &lt;h2 class="subnav"&gt;&lt;a href="menu1/menu_item2"&gt;Menu item 2&lt;/a&gt;&lt;/h2&gt;
    &lt;h2 class="subnav"&gt;&lt;a href="menu1/menu_item3"&gt;Menu item 3&lt;/a&gt;&lt;/h2&gt;
    &lt;h2 class="subnav"&gt;&lt;a href="menu1/menu_item4"&gt;Menu item 4&lt;/a&gt;&lt;/h2&gt;
    &lt;h2 class="subnav"&gt;&lt;a href="menu1/menu_item5"&gt;Menu item 5&lt;/a&gt;&lt;/h2&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>This is the jQuery:</p>
  
  <pre><code>   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');
  
    });
  </code></pre>
  
  <p>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 <code>$top_item</code>. That part of my jQuery doesn't work.</p>
  
  <p>I can't see what the error is, but then again I'm somewhat of a Javascript/jQuery n00b. Any help would be appreciated.</p>