Javascript jQuery正在向nav添加活动类，现在nav不工作

因此，我想让我的面包屑导航显示给用户他/她在哪一页上，根据他们在哪一页上使用不同的颜色。即，如果在主页上，主页链接为灰色，而其他链接保持黑色

为此，我在我的应用程序中添加了以下代码：

$(function(){

    $('.breadcrumb li a').on('click', function(e){

        e.preventDefault(); // prevent link click if necessary?

        var $thisA = $(this);
        var $li = $thisA.parent('a');

        if (!$thisA.hasClass('active'))
        {
            $li.find('a.active').removeClass('active');
                $thisA.addClass('active');
        }

    })

})

.breadcrumb li a.active {    color: #999999;}

但是，在上面的代码中，当我同时单击事件时，它不会释放活动类，例如，它们最终都是灰色的。此外，该页面不会切换，而是停留在主页上，主页和事件显示为灰色

css:

$(function(){

    $('.breadcrumb li a').on('click', function(e){

        e.preventDefault(); // prevent link click if necessary?

        var $thisA = $(this);
        var $li = $thisA.parent('a');

        if (!$thisA.hasClass('active'))
        {
            $li.find('a.active').removeClass('active');
                $thisA.addClass('active');
        }

    })

})

.breadcrumb li a.active {    color: #999999;}

html文件

 <ul class="breadcrumb">
     <li>
       <a class="active" href="/profiles"> Home</a>
     </li>
     <li>
       <a class="active" href="/events"> Events</a>
     </li>
     <li>
       <a href="/inbox"> Messages</a>
     </li>
     <li>
       <a href="/welcome"> My Profile</a>
     </li>
   </ul>

更改

var $li = $thisA.parent('a');

到

因为这条线

 $li.find('a.active').removeClass('active');

查找子

a.active

，您的原始

$li

将为空，因为您的原始行正在尝试查找一个

a

，该

是所单击
a
的父级

编辑

有关突出显示当前页面的资源：


$（“a[href*=”+location.pathname+”）.addClass（“当前”）来自

你能给我们呈现的html吗？尼科，一定要更新帖子。如果你把“event.preventDefault”放进去，页面就不会切换。。。这就是问题所在point@Julius当我删除event.prevent默认值时，活动类不会保留在默认值上，直到我释放click？但是当我保留event.preventDefault时，活动类会保留，但页面不会切换..非常感谢@TreeTree，太好了。现在唯一的问题是页面不会切换，当我删除event.preventDefault时，活动类不会保留在页面上，直到我释放单击按钮为止？但是，当我保留event.preventDefault时，活动类将保留，但页面不会切换。@SonnyBlack您正在查找的内容不可能以您的方式进行。您需要做的是在页面加载后检测您所在的页面，然后将该类添加到适当的菜单项中。页面检测是一个棘手的部分，根据页面HTML提供的信息，有很多方法可以实现。我对jQuery比较陌生，你介意提供一个例子吗？我会接受你的回答吗？@SonnyBlack老实说，这类问题不是最方便的工作示例，因为它涉及实际迷你网站上的多个页面。我已经发布了几个链接来演示如何做到这一点。