javascript - 我使用jquery的toggleClass来添加和删除，但它是( <li> ) <a> 链接列表

Question

<ul class="nav">
    <li>
        <a href="/dashboard">
            <i class="material-icons">dashboard</i>
            <p>Dashboard</p>
        </a>
    </li>
    <li>
        <a href="profile">
            <p>User Profile</p>
        </a>
    </li>
</ul>

现在我想要的是，如果我点击其中一个它就会变得活跃，所以我所做的是 -

   $(document).ready(function() {
  $('li').bind('click', function() {
    $( this ).addClass('active');
  });
});

但问题是它在加载页面后没有应用类，所以我希望在加载页面后应用它我也尝试了toggleClass

$('li').on('click', function() {
  $(this).parent().toggleClass('active'); 
});

任何建议..谢谢..

Answer 1

1.突出显示 <a>基于当前页面:-

$(document).ready(function(){
   var url = location.pathname;// Returns path
   $('.nav li a').each(function(){
     if(url.indexOf($(this).attr('href'))!== -1){
       $(this).addClass('active'); 
     }
   }
});

2.OR 突出显示 <li>基于当前页面:-

$(document).ready(function(){
   var url = location.pathname;// Returns path
   $('.nav li a').each(function(){
     if(url.indexOf($(this).attr('href'))!== -1){
      $(this).closest('li').addClass('active');
     }
   }
});