0

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

这是小提琴 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}​
4

5 回答 5

1

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/

干杯

于 2012-12-11T20:08:52.810 回答
1

您快到了，您的代码专门针对单击的元素，因此当您删除该类时，您只是将其从自身中删除，而不是菜单中的其他元素。通过像这个小提琴一样改变选择，你可以达到你想要的结果。

  $('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;
})
于 2012-12-11T20:09:42.803 回答
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/

于 2012-12-11T20:08:18.873 回答
0

在您的点击处理程序中，this引用指向被点击的项目。因此，您将删除滑块链接样式 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/

于 2012-12-11T20:09:11.050 回答
0

设置事件委托，这样您就没有多个处理程序监听多个元素。相反，只需监听一个共同祖先上的冒泡点击事件。例如，我设置了一个#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 中的任何其他锚点中删除我们的目标类，并将其添加到触发单击事件的链接开始：

$("#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/

于 2012-12-11T20:26:28.867 回答