Javascript 如何更改活动项？在物化导航栏中

我不太擅长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>

---

但是它不起作用

难道你没有忘记在项目中添加jquery吗？

---

我认为您的代码还可以。

您是否忘了在项目中添加jquery？

---

我认为您的代码还可以。

编辑：当我将a>href的值设置为“#”时，它可以工作，但当我像上面提到的那样放置url时，它就不工作了

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

---

有人知道如何使用li a>href？

Edit中的url保持活动类：当我将a>href的值设置为“#”时，它会工作，但当我按照上面提到的方式放置url时，它不会工作

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

---

有人知道如何使用li a>href？

中的url保持活动类，我通过使用“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;
}

{%block body%}
{%endblock%}
//警报（窗口、位置、路径名）；
开关（window.location.pathname）{
案例“/”：
$（'#ac'）.addClass（'活动'）
打破
案例'/apropos'：
$（'#ap'）.addClass（'活动'）
打破
案例“/ceQueJePropose”：
$（'#cp'）.addClass（'活动'）
打破
案例“/参考书目”：
$（'#bi'）.addClass（'活动'）
打破
案例“/联系人”：
$（'#cn'）.addClass（'活动'）
打破
}

我通过使用“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;
}

{%block body%}
{%endblock%}
//警报（窗口、位置、路径名）；
开关（window.location.pathname）{
案例“/”：
$（'#ac'）.addClass（'活动'）
打破
案例'/apropos'：
$（'#ap'）.addClass（'活动'）
打破
案例“/ceQueJePropose”：
$（'#cp'）.addClass（'活动'）
打破
案例“/参考书目”：
$（'#bi'）.addClass（'活动'）
打破
案例“/联系人”：
$（'#cn'）.addClass（'活动'）
打破
}

我添加了这个：我添加了这个：