javascript - jQuery 将事件类添加到导航，现在导航不起作用

Question

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

为此，我已将以下代码添加到我的应用中:

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

寻找一个 child 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#