Материализовать CSS и JQUERY - активный класс боковой панели не добавляется?

Question

Моя боковая панель состоит из HTML и Materialize CSS, и я пытаюсь добавить активный класс в listitem каждый раз, когда я перемещаюсь с помощью боковой панели.

   <ul id="slide-out" class="side-nav fixed sidebar"> 
        <li class="logo"> 
         <a href="#!" class="brand-logo"> 
          <img class="responsive-img" src="Images/communicarelogo.png" /> 
         </a> 
        </li> 
        <li id="healthrecord" class="bold"> 
         <a href="HealthRecords.aspx" class="waves-effect waves-teal">Health Records</a> 
        </li> 
        <li id="medmgt" class="bold"> 
         <a href="MedicationsManagement.aspx" class="waves-effect waves-teal">Medications Management</a> 
        </li> 
        <li id="healthprogram" class="bold"> 
         <a href="HealthPrograms.aspx" class="waves-effect waves-teal">Health Programs</a> 
        </li> 
        <li id="reports" class="bold"> 
         <a href="Reports.aspx" class="waves-effect waves-teal">Reports</a> 
        </li> 
        <li class="divider"></li> 
        <li class="bold"> 
         <a href="#" class="waves-effect waves-teal">My Profile</a> 
        </li> 
        <li class="bold"> 
         <a href="#" class="waves-effect waves-teal">Change Password</a> 
        </li> 
       </ul> 

Я пытался использовать JQUERY, но он не работает. Активный класс не показывает в ЛЮБОМ элементе списка. Вот мой код JQUERY.

$(function() { 
    var link = $('.sidebar-nav li a'); 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $(link).each(function() { 
     switch (pgurl) { 
      case "HealthRecords.aspx": 
       $('#healthrecord').addClass('active'); 
       break; 
      case "MedicationsManagement.aspx": 
       $('#medmgt').addClass('active'); 
       break; 
      case "HealthPrograms.aspx": 
       $('#healthprogram').addClass('active'); 
       break; 
     } 
    }); 
}); 

спасибо!

Answer 1

Сначала ваши уроки не так! имя вашей ul: side-nav, а не sidebar-nav. Во-вторых вам не нужно использовать кожух переключателя Просто проверьте HREF каждого из них:

$(function() { 
    var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1); 
    $(".side-nav li a").each(function(){ 
      if($(this).attr("href") == pgurl || $(this).attr("href") == '') 
      $(this).addClass("active"); 
    }) 
});