jQuery, highlight active menu item

Question

I am trying to make jQuery for my navigation to highlight the active menu item (my menu is made using sprites btw.) Manually adding the class="active" to one of the menu item, the highlighting works. But using my jQuery code, nothing happens...

Any ideas how to solve this?

Here is a demo fiddle of the problem. http://jsfiddle.net/wvEBw/1/

HTML:

<nav>
    <ul>
        <li><a href="#" id="btn1"></a></li>
        <li><a href="#" id="btn2" class="active"></a></li>
    </ul>
</nav>

CSS: (animated sprite)

//...

/* sprite menu animations */

nav a#btn1 {
    background-position:0px 0px;
    width:82px;
}

nav a#btn1:hover {
    background-position:0px -82px;
}

nav a#btn1.active {
    background-position:0px -164px;
}

nav a#btn2 {
    background-position:-108px 0px;
    width:82px;
}

nav a#btn2:hover {
    background-position:-108px -82px;
}

nav a#btn2.active {
    background-position:-108px -164px;
    outline: none;
}

jQuery:

$("nav li").click(function() {
    $("nav li a.active").removeClass("active"); //Remove any "active" class  
    $("a", this).addClass("active"); //Add "active" class to selected tab  

    $(activeTab).show(); //Fade in the active content  
    return false;
}

Answer 1

You forgot to add the jQuery library in your Fiddle
and to properly close your function with });

http://jsfiddle.net/wvEBw/3/

$("nav li").click(function ( e ) {
    e.preventDefault();
    $("nav li a.active").removeClass("active"); //Remove any "active" class  
    $("a", this).addClass("active"); //Add "active" class to selected tab  

    // $(activeTab).show(); //Fade in the active content  
});

Also this article might be interesting: Stop Misusing Return False
Here's a quick look at the DOCS: event.preventDefault