Question

我在页面上有一个链接列表，当用户点击我希望它突出显示的链接时，同时我希望其余链接变得不突出。在http://api.jquery.com/toggleClass/中间的演示完全符合我的要求，但它允许您一次突出显示许多链接。任何人都可以建议我需要调整以使其工作吗？非常感谢。

Answer 1

我建议使用类似的东西：

$('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的所有元素 - 名称'突出显示'和删除 class，以便只有一个链接可以在任何时候都有这个班级。

$(this).addClass('highlight');只是将类名“突出显示”添加到this元素（此示例中为a）。

<小时/> 参考文献：

Answer 2

在上面的演示中，您可以删除所有元素上的高亮类，然后在单击的元素上调用切换：

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

Answer 3

这是jquery。

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

Answer 4

我使用以下解决方案获得了一个导航树，我有~200个链接。它使用全局变量来保存上一个导航选择的选择器，当用户移动到另一个链接时，它将被清除：

var oldSelector = $();  // global var

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


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

与@David Thomas提供的方法相比，我认为这种方法没有太大的性能差异，但这是做同样事情的另一种方式。

jQuery toggleClass - 一次突出显示一个链接？

4 个答案: