jQuery: adding class to link if its clicked

Question

I call jquery function onclick at links. For example:

Content 1


        

Answer 1

Ok thanks for pasting the code, try this:

First wrap the group of anchor tags in a div, so you can seperate them out from the other anchors on your page, and they will be grouped:

So:

<div id="anchorGroup">
<a class="active" href="#">Content 1</a>
<a href="#">Content 2</a>
<a href="#">Content 3</a>
</div>

Then try this JQuery code:

    $("#anchorGroup a").click(function() {
    $("#anchorGroup a").removeClass('active');
    $(this).addClass('active');

});

Answer 2

A better way to do this would be to remove the function call from your anchor tags, and instead create a jQuery event handler.

I've got an example here in jsfiddle:

http://jsfiddle.net/3AKU3/

Answer 3

If you have the <a> tags in a parent element with an id, you can do this:

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

Working example: http://jsfiddle.net/fDZ97/

You could also just put the code above in your Animate2id() function that you have:

function Animate2id(id, ease) {
    var animSpeed = 2000;
    var $container = $("#container");
    if (ease) {
        var easeType = ease;
    } else {
        var easeType = "easeOutQuart";
    }

    $container.stop().animate({
        "left": -($(id).position().left)
    }, animSpeed, easeType);

    // remove "active" class from all links, add it to this one
    $('#parent_element_of_links a').removeClass('active');
    $(this).addClass('active');
}​

---

Update

The this keyword wasn't working because it was referring to the window rather than the link. So I added an extra parameter in the function and it works perfectly now, just remember to add this in the onclick (right before you define the ease variable):

function Animate2id(id, t, ease) {
    var animSpeed = 2000;
    var $container = $("#container");
    if (ease) {
        var easeType = ease;
    } else {
        var easeType = "easeOutQuart";
    }

    $container.stop().animate({
        "left": $(id).position().left
    }, animSpeed, easeType);

    // remove "active" class from all links, add it to this one
    $('#links a').removeClass('active');
    $(t).addClass('active');
}​

Working jsFiddle Example: http://jsfiddle.net/Uqqmy/

Answer 4

This should help

$("a").on("click", function(e){
   e.preventDefault();
   $(this).addClass("active"); 
   $(this).siblings().removeClass("active");
});