Add and remove active class from navigation link

Question

I was looking for tutorials on how to add and remove a class from a link, unfortunately, without any success. All the earlier questions about this give me some understanding, but they don’t give me the result that I want to achieve.

I am trying to have an active state for my navigation by adding and removing a class when a link is clicked.

Here is what I have in JavaScript:

$(document).ready(function(){ //active state $(function() { $('li a').click(function(e) { e.preventDefault(); var $this = $(this); $this.closest('li').children('a').removeClass('active'); $this.parent().addClass('active'); }); }); }); 

And this is my navigation:

 <div id="nav"> <div id="main-nav" class="center"> <ul> <li><a href="/photography.php">Photography</a></li> <li><a href="/web.php">Web</a></li> <li><a href="/print.php">Print</a></li> <li class="nav-R"><a href="/about.php">About</a></li> <li class="nav-R"><a href="/contact.php">Contact</a></li> </ul> </div><!-- close center --> </div><!-- close-nav --> 

Answer 1

You remove the “active” class from the closest child of li , and then add the active class to the current parent of a li . In the spirit of keeping the active class anchored, not in list items, this will work for you:

  $('li a').click(function(e) { e.preventDefault(); $('a').removeClass('active'); $(this).addClass('active'); }); 

An active link is an active link. There will be no more than one link on the network at any given time, so there is no reason to be absolutely specific regarding the removal of the active class. Just remove from all anchors.

Demo: http://jsfiddle.net/rq9UB/

Answer 2

Try:

 $(function() { $('li a').click(function(e) { e.preventDefault(); var $this = $(this); $this.closest('ul').find('.active').removeClass('active'); $this.parent().addClass('active'); }); }); 

Your selector looked at the parent of the current element ( $(this) ) a , and then looked at the children of that element for a . The only a in this element is the one you just clicked.

My solution instead moves to the nearest ul and then finds element that currently has the class of active` and then removes this class.

Also your approach, as indicated, added the active class name to the li element, and you wanted to remove the class name from the a element. My approach uses li , but you can make changes to it to use a by simply removing parent() from the last line.

Literature:

• children() .
• closest() .
• find() .

Answer 3

I think you want:

 $this.parents("ul").find("a").removeClass('active'); 

Answer 4

Try the following:

 $(function() { $('.start').addClass('active'); $('#main-nav a').click(function() { $('#main-nav a').removeClass('active'); $(this).addClass('active'); }); }); 

Just add the .start class to the nav element, which must first have a .active class.

Then declare the class. active in your css for example:

 #main-nav a.active { /* YOUR STYLING */ }