jQuery toggleClass - 每次突出顯示一個鏈接？

我有一個頁面上的鏈接列表，當用戶點擊一個鏈接時，我希望它突出顯示，同時我希望剩下的鏈接不被注意。演示在http://api.jquery.com/toggleClass/下降的一半正是我想要的，但它允許您一次突出顯示多個鏈接。任何人都可以告訴我需要調整什麼才能使這個工作？非常感謝。jQuery toggleClass - 每次突出顯示一個鏈接？

來源

2011-05-02 Chris

檢查： http://stackoverflow.com/questions/5057191/toggleclass-and-remove-class-from-all-other-elements – 2013-02-07 16:26:27

我建議使用類似：

$('a').click(
function(e){ 
    e.preventDefault; // don't follow the link 
    $('.highlight').removeClass('highlight'); 
    $(this).addClass('highlight') 
});

JS Fiddle demo。

e.preventDefault;停止鏈接後的瀏覽器。您可能或不可能希望刪除此行。

$('.highlight').removeClass('highlight');選擇class -name「突出」和的所有元件中刪除該class，使得僅一個鏈路可以在任一個時刻具有類。

$(this).addClass('highlight');只是將類名'highlight'添加到this元素（本例中爲a）。

參考文獻：

來源

2011-05-02 10:16:20

沒有喜悅與您的代碼在我結束，但JS小提琴看起來很有用 - 非常感謝這麼快分享這個。 – Chris 2011-05-02 10:28:32

我在這段代碼的第一個版本中遇到了一個錯字（我忘記關閉字符串$（'a）'，後來我對它進行了修改）。它是否適用於JS Fiddle？ – 2011-05-02 10:30:54

在上面的演示中，你可以刪除突出顯示類上的所有元素，然後調用切換點擊的元素：

$("p").click(function() { 
     $("p").removeClass("highlight"); 
     $(this).addClass("highlight"); 
    });

來源

2011-05-02 10:17:42 Lucian

您應該用'addClass'替換'toggleClass'，因爲在您的示例中，類不會被切換。功能將是一樣的，但你刪除了額外的支票 – JohnP 2011-05-02 10:20:02

盧西恩這完美的作品，非常感謝你。 JohnP也感謝您的建議，我會根據您的建議修改代碼。再次感謝幫助如此迅速的傢伙，這是非常感謝。 – Chris 2011-05-02 10:30:04

固定，謝謝約翰。 – Lucian 2011-05-02 10:39:26

-1

這裏是jQuery的。

$('a').click(
function(){ 
    $('a').removeClass('highlight'); 
    $(this).addClass('highlight'); 
});

來源

2011-05-02 10:24:33 Suhail

和盧西恩的答案一樣！ – mram888 2012-10-04 14:23:12

-2

我使用了以下解決方案用於導航樹，我有〜200個鏈接。它使用一個全局變量來保持前一資產淨值的選擇，其獲得的選擇器的清除，當用戶移動到另一個鏈接：

var oldSelector = $(); // global var 

$('a').on(click, 
function(){ 
    oldSelector.removeClass('selected'); 
    $(this).addClass("selected"); 
    oldSelector = currentSelector; 
}); 


// css 
.selected { 
background-color: lightblue; 
}

我不認爲這是用此方法很多性能上的差異比什麼@大衛托馬斯提供，但這是做同樣的事情的另一種方式。

來源

2012-08-20 10:11:38 rags

jQuery toggleClass - 每次突出顯示一個鏈接？

回答

相關問題