Question

hi i was wondering how do i click on a link that keeps a class until i click on another upon which it will remove the class from that and the one that i just clicked will have the class in return?

//animation for secondary content pics
$('#small li').hover(function () {
    $(this).addClass('small_list_hover');
}, function () {
    $(this).removeClass('small_list_hover');
});

$("h4").append('<em> Image 1</em>').show();

$("#small a").click(function () {
    var largePath = $(this).attr("href");
    var largeAlt = $(this).attr("title");
    $('li').removeClass('small_li_hover');
    $('this').addClass('small_li_hover');
    $('#largeImg').hide().fadeIn(1000).attr({
        src: largePath,
        alt: largeAlt
    });
    $("h4 em").html(" " + largeAlt + " ");
    return false;
});

Answer 1

$("#small a").click(function () {
    var largePath = $(this).attr("href");
    var largeAlt = $(this).attr("title");



    //$('li').removeClass('small_li_hover'); 
    // $('this').addClass('small_li_hover'); // your problem is here....
    $(this).closest('li').addClass('small_li_hover')
           .siblings().removeClass('small_li_hover');


    $('#largeImg').hide().fadeIn(1000).attr({
        src: largePath,
        alt: largeAlt
    });
    $("h4 em").html(" " + largeAlt + " ");
    return false;
});

---

Hi Reigel, i tried it but it doesnt
work. When i hover off the link it the
class removes itself!

Well, I’m not surprised. So, how about we do it this way,

changed,

$(this).closest('li').addClass('small_li_hover')
       .siblings().removeClass('small_li_hover');

to something like,

$(this).closest('li').addClass('small_li_active')
       .siblings().removeClass('small_li_active');

then on your css, if you have something like,

.small_li_hover {
   color: red;
}

changed it to

.small_li_active,
.small_li_hover {
   color: red;
}

simple demo