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

因此，我希望我的面包屑导航根据他们所在的页面使用不同的颜色来向用户显示他/她所在的页面。即如果在家中，家庭链接是灰色的，而其他人则保持黑色。jQuery将活动类添加到导航，现在导航不工作

要做到这一点，我下面的代码添加到我的应用程序：

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

来源

2013-12-17 Sonny Black

你能不能给我们呈现的HTML？ – Nico

Nico，确定更新信息。 –

如果你放置“event.preventDefault”，页面将不会切换......这是 – Julius

变化

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

到

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

，因为这条线

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

寻找孩子a.active和因为你原来的线路试图找到一个a那就是点击a的父母原来的$li将是空的。

编辑

资源凸显当前页面：

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#

来源

2013-12-17 20:14:34 TreeTree

非常感谢@TreeTree，这是完美的。现在唯一的事情是页面不能切换，当我删除event.preventDefault时，活动类不会停留在上，直到我释放点击？但是，当我保持event.preventDefault，活动类停留，但页面不会切换.. –

@SonnyBlack你正在寻找的东西是不可能的，你这样做。你需要做的是检测页面加载后你在哪个页面上，然后将该类添加到适当的菜单项。页面检测是一个棘手的部分，根据页面HTML提供的信息，有很多方法可以解决这个问题。 – TreeTree

我对jQuery比较陌生，你介意提供一个例子吗？我会接受你的答案吗？ –

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

回答

相关问题