Как изменить активные объекты? in Materialize navbar

Question

Я не так хорош в Js и JQuery, и я ищу изменения активных элементов, изменяя активный класс li, в Materialize navbar. Я попытался это:

<nav> 
    <div class="nav-wrapper"> 
     <a href="#" class="brand-logo right">Logo</a> 
     <ul id="nav-mobile" class="left hide-on-med-and-down"> 
     <li class="active"><a href="{{path('marianna_mv_Accueil')}}">Accueil</a></li> 
     <li><a href="{{path('marianna_mv_APropos')}}">Á propos de moi</a></li> 
     <li><a href="{{path('marianna_mv_CeQueJePropose')}}">Ce que je propose</a></li> 
     <li><a href="{{path('marianna_mv_Bibiliographie')}}">Bibliographie</a></li> 
     <li><a href="{{path('marianna_mv_Contact')}}">Contact</a></li> 
     </ul> 
    </div> 
    </nav> 

сценарий

$('.nav-wrapper ul li').click(function() { 
    $(this).siblings('li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Но это не работает

Answer 1

Я решил проблему с помощью переключателя на "window.location.pathname" таким образом:

 <nav> 
    <div class="nav-wrapper"> 
     <a href="#" class="brand-logo right">Logo</a> 
     <ul id="nav-mobile" class="left hide-on-med-and-down"> 
     <li id="ac" ><a href="{{path('marianna_mv_Accueil')}}">Accueil</a></li> 
     <li id="ap" ><a href="{{path('marianna_mv_APropos')}}">Á propos de moi</a></li> 
     <li id="cp" ><a href="{{path('marianna_mv_CeQueJePropose')}}">Ce que je propose</a></li> 
     <li id="bi" ><a href="{{path('marianna_mv_Bibiliographie')}}">Bibliographie</a></li> 
     <li id="cn" ><a href="{{path('marianna_mv_Contact')}}">Contact</a></li> 
     </ul> 
    </div> 
    </nav> 



     {% block body %} 
     {% endblock %} 

    <script> 
//alert(window.location.pathname);  
switch (window.location.pathname) { 
    case '/': 
     $('#ac').addClass('active') 
     break; 
    case '/apropos': 
     $('#ap').addClass('active') 
     break; 
    case '/ceQueJePropose': 
     $('#cp').addClass('active') 
     break;   
    case '/bibliographie': 
     $('#bi').addClass('active') 
     break; 
    case '/contact': 
     $('#cn').addClass('active') 
     break; 
} 

Answer 2

Вы не забудьте добавить JQuery с вашим проектом? Я думаю, что ваш код в порядке.

Answer 3

Редактировать: когда я устанавливаю значение a> href в «#», он работает, но когда я помещаю url, как указано выше, это не работает.

Когда я помещаю URL-адрес, я замечаю, что он работает, когда страница загружается, но быстро активный класс возвращается в исходное li и исчезает в текущем li для текущей страницы.

Кто-то знает, как сохранить активный класс с url в li a> href?