如何更改活动项目？在 Materialise 导航栏中

Question

我不太擅长 Js 和 Jquery，我正在寻找通过在 Materialize 导航栏中更改 li active class 来更改活动项。我试过这个：

    <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

您是不是忘记在项目中添加 jquery 了？我觉得你的代码没问题。

Answer 2

编辑：当我将 a>href 的值设置为“#”时它有效，但是当我如上所述输入 url 时它不起作用。

当我放置 URL 时，我注意到它在加载页面时有效，但活动 class 很快又回到初始 li，并在当前 li 中消失页。

有人知道如何使用 li a>href 中的 url 保持活跃 class 吗？

Answer 3

我通过在 "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;
}

如何更改活动项目？在 Materialise 导航栏中

how to change active items ? in Materialize navbar

javascript

jquery

navbar

materialize