我如何點擊一個鏈接，該鏈接保持一個班，直到我點擊另一個？

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