設置基於URL的菜單項目

我一直在努力完成我想要完成的任務，但是我無法按照自己的方式工作。我有一個帶有一級菜單項（duh）和二級菜單項的導航菜單。它看起來像這樣：設置基於URL的菜單項目

<ul class="nav" id="side-menu"> 
    <li> 
     <a href="/admin/">Dashboard</a> 
    </li> 
    <li> 
     <a href="/admin/pages/">Pages</a> 
    </li> 
    <li> 
     <a href="#">Users<span class="fa arrow"></span></a> 
     <ul class="nav nav-second-level"> 
      <li> 
       <a href="/admin/users/">All users</a> 
      </li> 
      <li> 
       <a href="/admin/users/roles/">Roles</a> 
      </li> 
     </ul> 
    </li> 
</ul>

我使用下面的jQuery函數到active類添加到當前菜單項：

function setActive() { 
    var url = window.location; 
    var element = $('ul.nav a').filter(function() { 
     return this.href == url || url.href.indexOf(this.href) == 0; 
    }).addClass('active').parent().parent().addClass('in').parent(); 

    if (element.is('li')) { 
     element.addClass('active'); 
    } 
    // Remove active class from A element if the page isn't the dashboard. 
    if (location.pathname !== '/admin/' && $('[href="/admin/"]').hasClass('active')) { 
     $('[href="/admin/"]').removeClass('active'); 
    } 
};

也能正常工作的所有第一級菜單項和爲二級菜單項All users，但是當我轉到/admin/users/roles/時，它使All users和Roles處於活動狀態。當我去/admin/users/roles/add/時會發生同樣的事情。我想，這是因爲該代碼使得它看起來像window.location活躍的所有菜單項，但我不知道如何只能讓Roles活躍，當我去/admin/users/roles/和/admin/users/roles/add/等

我真的希望有人能夠幫助我與此。如果可以的話，我會給你買一瓶啤酒。

來源

2015-12-02 SomeCode

試試這個..

var loc = window.location.pathname; 

    $('#side-menu').find('a').each(function() { 
    $(this).toggleClass('active', $(this).attr('href') == loc); 
    });

和HREF i.e.http://yourdomain.com//admin/users/roles/

來源

2015-12-02 10:46:01

由於UE完整的絕對路徑！當我現在轉到'/ admin/users/roles /'時，它只會使'角色'激活，所以這很好。但是當我到'/ admin/users/roles/add /'時，它什麼也沒有做。建議？ – SomeCode

你可以發佈代碼嗎.. –

我用你的代碼。你可以在我的第一篇文章中找到我使用的其他代碼。 – SomeCode

設置基於URL的菜單項目

回答

相關問題