jQuery向导航添加活动类，现在导航不起作用

Question

所以，我希望我的面包屑导航通过根据用户所在的页面使用不同的颜色来向用户显示他/她所在的页面。 IE。如果在 home 上，则 home 链接是灰色的，而其他链接保持黑色。

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

$(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');
        }

    })

})

但是，使用上面的代码，当我还单击事件时，它永远不会释放活动类，例如它们最终都是灰色的。此外，页面不会切换，它会停留在主页上，但主页和事件是灰色的。

css：

.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>

Answer 1

改变

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

到

var $li = $thisA.parents('ul');

因为这条线

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

查找子 a.active 并且您的原始 $li 将为空，因为您的原始行试图找到一个 a，它是被点击的 a 的父级。

编辑

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

http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

$("a[href*='" + location.pathname + "']").addClass("current"); 来自highlighting the current page in a list of links using css / html

http://www.eznetu.com/current-link.html#