Как установить активный класс меню боковой панели навигации?

Question

У меня есть боковая навигация и активный класс на первом li приборной панели. Когда я перехожу к другому активному классу li , не устанавливается на другой li . После перезагрузки страницы активный класс перемещается к первому li . Как установить активный класс при нажатии li ? Я добавил сценарий, который я пробовал до сих пор, но у меня все еще не работает.

 <div class="main-menu menu-fixed menu-light menu-accordion menu-shadow" data-scroll-to-active="true">
     <div class="main-menu-content">
         <ul class="navigation navigation-main custom-nav" id="main-menu-navigation" data-menu="menu-navigation">
             <li class="active nav-item"><a href="{{url('/home')}}"><i class="feather icon-home"></i><span class="menu-title" data-i18n="Dashboard">Dashboard</span></a>
             <li class=" nav-item"><a href="{{url('/stats')}}"><i class="feather icon-home"></i><span class="menu-title" data-i18n="Dashboard">Statistics</span></a></li>
             <li class=" nav-item"><a><i class="feather icon-copy"></i><span class="menu-title" data-i18n="Form Elements">Trips Menu</span></a>
                 <ul class="menu-content">
                     <li><a href="{{route('get.users')}}"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Switch">Users</span></a></li>
                     <li><a href="{{route('get.tours')}}"><i class="feather icon-circle"></i><span class="menu-item" data-i18n="Checkbox">Tours</span></a></li>
                 </ul>
             </li>
        </ul>
     </div>
</div>

Скрипт:

<script>
    $(document).ready(function(){
        if($(".navigation a").attr("href")==window.location.href){
            $(".nav-item").attr("class","active");
        }
        else{
            $(".nav-item").attr("class","");
        }
    });
</script>