尝试在导航中使用 jQuery 的 .addClass 方法答案

【问题标题】：Trying to use jQuery's .addClass method with navigation尝试在导航中使用 jQuery 的 .addClass 方法
【发布时间】：2011-02-10 21:29:25
【问题描述】：

我有一个导航，其中我正在尝试使用 jQuery 的 addClass 方法来设置最后点击链接的链接颜色。问题是我必须在导航中的所有其他链接上使用 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

我确实通过使用this 参考解决了部分问题，但这不包括.removeClass 部分。

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

【问题讨论】：

你能澄清一下上面的 HTML 层次结构是正确的，点击外部的<li> 也应该调用这个点击处理程序吗？大多数答案似乎都忽略了外部列表。

标签： javascript jquery navigation addclass

【解决方案1】：

或者这个更像你的网站：

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

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

【讨论】：

@user543551：这对你有帮助吗？

【解决方案2】：

试试这个来切换类：

var navs = jQuery('#shop-nav,#art-nav, #obj-nav, #acc-nav');
navs.click(function(){
    navs.removeClass("clicked");
    $(this).addClass("clicked");
});

【讨论】：

如果您添加必须添加到该数组的链接，这不会扩展。不是很干燥或不显眼
如果标签/链接的数量不固定，那么是的，这不是合适的方式。

【解决方案3】：

未经测试

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

【讨论】：

【解决方案4】：

您可以先删除所有单击的类，然后将其添加回刚刚单击的类。

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

【讨论】：

【解决方案5】：

这应该工作：

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

基于您显然希望对所有 #main-nav 的后代链接执行此操作，而不仅仅是内部 <ul> 列表中的链接。

【讨论】：