アクティブなアイテムを変更するには？マテリアライズのnavbar

Question

私はJsとJqueryでそれほど良くはありません。マテリアライズのnavbarではliアクティブなクラスを変更してアクティブなアイテムを変更したいと考えています。 私はこの試みている：

<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

編集：> hrefの値を「＃」に設定すると機能しますが、上記のURLを入力すると機能しません。

URLを置くと、ページが読み込まれてもすぐにアクティブなクラスが最初のliに戻り、現在のページの現在のliで消えていることがわかります。

誰かがli> hrefのURLでアクティブなクラスを維持する方法を知っていますか？