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

からではなく、「いとこ」リンクからクラスを削除する必要があります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 に答える
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

コードはクリックされた要素のみをターゲットにしているため、クラスを削除すると、メニュー内の他の要素ではなく、クラス自体から削除されます。このfiddleのように選択を変更することで、目的の結果を得ることができます。

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

または、セレクターを再利用してプールにジャンプしないようにする場合は、同じ選択に対して DOM を 2 回解析する必要がないため、パフォーマンスがわずかに向上するはずです。

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 に答える
0

クリック ハンドラーでは、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/

于 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 に答える