jQuery将活动类添加到nav，现在nav不工作

jQuery adding active class to nav, now nav not working

本文关键字：nav 现在 工作 活动 添加 jQuery      更新时间：2023-09-26

因此，我希望我的breadcrumb导航可以根据用户所在的页面使用不同的颜色来向用户显示他/她所在的页面。例如，如果在主页上，主页链接为灰色，而其他链接保持为黑色。

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

$(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>

更改

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

至

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

因为这条线路

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

查找子a.active，而您的原始$li将为null，因为您的原始行正试图查找作为单击的a的父级的a。

编辑

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

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

$("a[href*='" + location.pathname + "']").addClass("current");使用css/html 突出显示链接列表中的当前页面

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

相关文章：