如何更改活动项目?在物化导航条

how to change active items ? in Materialize navbar

本文关键字：导航 何更改 活动 项目      更新时间：2023-09-26

我在Js和Jquery中不是很好，我正在寻找通过在Materialize导航栏中更改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');
});

但是行不通

你忘记在你的项目中添加jquery了吗?

编辑:当我设置a>href的值为"#"它工作，但当我把url如上所述它不工作。

当我放入URL时，我注意到它在加载页面时工作，但很快活动类就回到了初始的li中，并在当前页面的当前li中消失。

有人知道如何保持活动类的url在li a>href ?

我通过打开"window.location "来解决这个问题。路径名:

     <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;
}
相关文章：