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將活動類添加到導航，現在導航不工作

回答

相關問題