3

jQueryのaddClassメソッドを使用して、最後にクリックされたリンクのリンクの色を設定しようとしているNavがあります。問題は、Nav の他のすべてのリンクで removeClass を使用する必要があることです。それが私が困っていることです。

私は素朴な方法でコードを書きましたが、これは良いプログラミングではないことを知っています。以下は、スタイル シート ref を使用したコードです。

jQuery('#shop-nav').click(function(){
    jQuery("#shop-nav").addClass("clicked");
    jQuery("#art-nav").removeClass("clicked");
    jQuery("#obj-nav").removeClass("clicked");
    jQuery("#acc-nav").removeClass("clicked");
});

jQuery('#art-nav').click(function(){
    jQuery("#art-nav").addClass("clicked");
    jQuery("#shop-nav").removeClass("clicked");
    jQuery("#obj-nav").removeClass("clicked");
    jQuery("#acc-nav").removeClass("clicked");
});

などなど！

HTMLは

<div id="nav-cell-1" class="grid f-cell nav-cell">
<ul id="main-nav" class="nav clearfix">
    <li><a href="#" id="shop-nav">Shop</a>
        <ul id="shop-cats">
            <li><a href="#" id="art-nav">Art</a></li>
            <li>&#8226;</li>
            <li><a href="#" id="obj-nav">Objects</a></li>
            <li>&#8226;</li>
            <li><a href="#" id="acc-nav">Accessories</a></li>
        </ul>
    </li>
</ul>
</div>

CSS:

a:link, a:visited {color:#cfb199;text-decoration:none} /* official this color:#9d9fa1; work color: #222*/
a:active, a:hover {color:#9d9fa1;text-decoration:none} /* old color:#9d9fa1; */ /* official color:#cfb199; work color: #f00*/
a:link.clicked, a:visited.clicked {color:green;text-decoration:underline}

デモ サイトはこちら: http://www.tomcarden.net/birdycitynav/partial-nav-demo.html

参照を使用して問題の一部を解決しましたthisが、これにはその部分は含まれていません.removeClass。

jQuery('#shop-cats>li>a').click(function(){
    jQuery(this).addClass("clicked");
});
4

5 に答える 5

3

または、これはあなたのサイトのように機能します:

$('.nav a').click(function(){
    $('.nav a').removeClass('clicked');
    $(this).toggleClass('clicked');
});

ここでテストしてください: http://www.jsfiddle.net/mjYq3/18/

于 2011-02-10T21:49:51.563 に答える
0

最初にクリックしたすべてのクラスを削除してから、クリックしたクラスだけに追加し直すことができます。

jQuery('#shop-cats>li>a').click(function(){
  jQuery('#shop-cats>li>a').removeClass("clicked")
  jQuery(this).addClass("clicked");
});
于 2011-02-10T21:38:53.343 に答える
0

これはうまくいくはずです：

$('#main-nav a').click(function() {
    $('#main-nav a').not(this).removeClass('clicked');
    $(this).addClass('clicked');
});

#main-nav内部<ul>リストにあるリンクだけでなく、の子孫であるすべてのリンクに対してこれを実行したいようです。

于 2011-02-10T21:43:42.183 に答える
0

クラスを切り替えるには、これを試してください：

var navs = jQuery('#shop-nav,#art-nav, #obj-nav, #acc-nav');
navs.click(function(){
    navs.removeClass("clicked");
    $(this).addClass("clicked");
});
于 2011-02-10T21:36:31.143 に答える
0

未テスト

jQuery('#shop-cats>li>a').click(function(){
    $this = jQuery(this);
    $this.parent().children('a').removeClass('clicked');
    $this.addClass("clicked");
});
于 2011-02-10T21:36:38.693 に答える