Question

所以，我希望我的痕迹导航向用户显示他/她所在的页面，根据他们所在页面的不同颜色。即如果在家，主页链接是灰色的，而其他链接保持黑色。

要执行此操作，我已将以下代码添加到我的应用中：

$(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是所点击的$("a[href*='" + location.pathname + "']").addClass("current");的父级。

修改

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

http://hicksdesign.co.uk/journal/highlighting-current-page-with-css
来自highlighting the current page in a list of links using css / html
的
{{1}}
http://www.eznetu.com/current-link.html#

jQuery将活动类添加到nav，现在导航无法正常工作

1 个答案: