Add & remove active class from a navigation link

Question

I have been looking for tutorials on how to add and remove a class from a link unfortunately without any success. All the earlier questions on this have give me some understanding, but haven't give me the result I want to accomplish.

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

Here is what I have as far as 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 -->

Ersatz

I think the quickest option would be $("main-nav ul li").removeClass('active') – Conjoint

Answer 1

You're removing the 'active' class from the closest li's child element, and then you're adding the active class to the current a's parent li. In the spirit of keeping the active class on the anchors and not the list items, this will work for you:

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

The active link is the active link. There'd never be more than one link active at any given time, so there's no reason to be all specific about removing the active class. Just remove from all anchors.

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

Grocer

Thanks, the only thing is that now when clicking the link it won't load the selected page – Ersatz

It wouldn't have done it originally with e.preventDefault(); either :) – Grocer

Didn't realized I un-accept. just one more question, right now it works but when I click (e.g. about) it adds the class to the link but it does not take me to the page. this is the link: contestabilidesigns.com/print.php – Ersatz

This is being caused by e.preventDefault(). e stands for event, and the default action of the event is to change the window.location to the href. Why do you have that line in the code if you don't want the links to behave as links? – Grocer

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 was looking at the parent element of the current ($(this)) a element, and then looking among the children of that element for an a. The only a in that element is the one you just clicked.

My solution instead moves up to the closest ul and then finds the element that currently has the class ofactive` and then removes that class.

Also your approach, as posted, was adding the active class-name to the li element, and you were looking to remove the class-name from an a element. My approach uses the li, but that can be amended to use the a by simply removing the parent() from the final line.

References:

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

Headfirst

Answer 3

I think you want:

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

Discernment

he's adding the class to the li element so it should be ('ul li') – Conjoint

@Conjoint - I think he's adding to the anchor – Discernment

my understanding is that $("li a") makes $(this) the anchor and then he uses $this.parent().addClass('active'); and the li would be the parent? – Conjoint

Answer 4

Try this:

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

Just add the class .start to the nav element you want to have the class .active first.

Then declare the class .active in your css like:

#main-nav a.active {

/* YOUR STYLING */

}

Keats