我如何点击一个链接，该链接保持一个班，直到我点击另一个？

Question

嗨，我想知道如何点击一个链接，保持一个类，直到我点击另一个它将从中删除类，我刚刚点击的类将返回类？

//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; 
}); 

---

嗨Reigel，我尝试过，但它不 工作。当我将鼠标悬停在链接上时， 类自动删除！

嗯，我并不感到惊讶。因此，如何对我们这样来做，

改变，

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

喜欢的东西，

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

然后在你的CSS，如果你碰到这样的，

.small_li_hover { 
    color: red; 
} 

将其更改为

.small_li_active, 
.small_li_hover { 
    color: red; 
} 

simple demo

Answer 2

你能不能做这样的事情：

$(document).ready(function() { 
    $("a").click(function() { 
     $("a").removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}); 

Answer 3

试试这个....

$("a").click(function(){ 
    $("a.active").removeClass("active"); 
    $(this).addClass("active"); 
}); 

DEMO

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