Question

我正在尝试创建一个导航链接，当我点击一个链接时，它会突出显示为不同的颜色，但是当我点击下一个链接时，前一个链接会突出显示，而点击的最新链接会突出显示

这是小提琴 http://jsfiddle.net/d0okie0612/JCzvL/22/

现在只是突出显示所有链接

html

  <span class="tab1"><a class="slider_link" href="#1" rel="welcome">Comics</a></span>
  <span class="tab2"><a class="slider_link" href="#2" rel="hatstory">Media</a></span>
  <span class="tab3"><a class="slider_link" href="#3" rel="annoyed">Bat News</a></span>

jquery

$('a.slider_link').click(function(e) {
    e.preventDefault()
    $(this).removeClass('slider_link_style');
    $(this).addClass('slider_link_style');
    return false;
})

CSS

.slider_link_style{color: white}

Answer 1

您需要从“堂兄”链接中删除该课程，而不是从this：

$('a.slider_link').click(function(e) {
    e.preventDefault()
    $(this).closest('span').siblings().find('a').removeClass('slider_link_style');
    $(this).addClass('slider_link_style');
    return false;
});

http://jsfiddle.net/mblase75/JCzvL/24/

Answer 2

只需稍微调整removeClass电话：

$('a.slider_link').click(function(e) {
    e.preventDefault()
    //
    // Remove class from *all* a.slider_links:
    //
    $('a.slider_link').removeClass('slider_link_style');
    $(this).addClass('slider_link_style');
    return false;
});

检查：http://jsfiddle.net/a892N/

干杯

Answer 3

你几乎就在那里，你的代码专门针对被点击的元素，所以当你删除这个类时，你只是将它从自身中删除，而不是从菜单中的其他元素中删除它。通过更改此fiddle中的选择，您可以实现所需的结果。

  $('a.slider_link').click(function(e) {
      e.preventDefault()
      $('a.slider_link').removeClass('slider_link_style');
      $(this).addClass('slider_link_style');
      return false;
  });

或者如果你想重复使用选择器来跳过池中的最短时间，这应该会给你带来轻微的性能提升，因为你没有为相同的选择解析DOM两次。

var menu_items = $('a.slider_link');
menu_items.click(function(e) {
    e.preventDefault()
    menu_items.removeClass('slider_link_style');
    $(this).addClass('slider_link_style');
    return false;
})

Answer 4

在您的点击处理程序中，this引用指向已单击的项目。因此，您要将slider_link_style CSS类删除并重新添加到同一元素。试试这个：

$('a.slider_link').click(function(e) {
    e.preventDefault()
    $('a.slider_link').removeClass('slider_link_style');
    $(this).addClass('slider_link_style');
    return false;
})

http://jsfiddle.net/JCzvL/23/

Answer 5

设置事件委派，因此您没有多个处理程序侦听多个元素。相反，只需在共同的祖先上听一个冒泡的点击事件。例如，我设置了#links父级：

<nav id="links">
    <span class="tab1">
        <a class="slider_link" href="#1" rel="welcome">Comics</a>
    </span>
    <span class="tab2">
        <a class="slider_link" href="#2" rel="hatstory">Media</a>
    </span>
    <span class="tab3">
        <a class="slider_link" href="#3" rel="annoyed">Bat News</a>
    </span>
</nav>

现在使用$.on来绑定委派。当点击#links中的任何锚点时，我们从delegateTarget中的任何其他锚点移除我们的目标类，并将其添加到触发click事件开始的链接：

$("#links").on("click", "a", function (event) {
    $(event.delegateTarget).find("a").removeClass("slider_link_style");
    $(this).addClass("slider_link_style");
    event.preventDefault();
});

小提琴：http://jsfiddle.net/JCzvL/25/

导航活动链接突出显示

5 个答案: