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 - 每次突出显示一个链接？

回答

相关问题