Databases
StackOverflow2013
Postsdbo
POActive navigation with jQuery - can't apply a default class to anchor
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POActive navigation with jQuery - can't apply a default class to anchor
    text
    copied!<p>I am currently trying to make a navigation-menu where an active-class is applied to the anchors with hrefs 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 $top_item. 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 Javascipt/jQuery n00b. Any help would be appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload