我有一个导航,其中我试图使用jQuery的addClass方法设置最后单击的链接的链接颜色.问题是我必须在Nav中的所有其他链接上使用removeClass.这就是我遇到的麻烦.

我已经天真地编写了代码,但是知道这不是很好的编程.下面是带有样式表参考的代码.

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

我确实使用此引用解决了部分问题,但是其中不包括.removeClass部分.

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

解决方法:

或者这更像您的网站：

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

在这里测试：
http://www.jsfiddle.net/mjYq3/18/