Je ne suis pas si bon en Js et Jquery, et je cherche à changer les éléments actifs en changeant la classe active li, dans Materialize navbar. J'ai essayé ceci:

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

Scénario

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

Mais ça ne marche pas

1
Abds 10 août 2016 à 00:14

3 réponses

Meilleure réponse

J'ai résolu le problème en utilisant un commutateur sur "window.location.pathname" de cette façon:

     <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;
}
0
Abds 11 août 2016 à 00:25

Edit: quand je règle la valeur de a> href à "#" ça marche, mais quand je mets l'url comme mentionné ci-dessus ça ne marche pas.

Lorsque je mets l'URL, je remarque que cela fonctionne lorsque la page est chargée mais rapidement la classe active est de retour dans la li initiale, et disparaît dans la li actuelle pour la page actuelle.

Quelqu'un sait comment garder la classe active avec l'URL dans li a> href?

0
Abds 10 août 2016 à 00:29

N'avez-vous pas oublié d'ajouter jquery à votre projet? Je pense que votre code est correct.

0
Biswajit Panday 9 août 2016 à 22:07