ページがjQueryをリフレッシュするときにアクティブクラスが削除されます

Question

ナビゲーションとして機能しているページにULがあります。私のフッタにはjQueryのコードがいくつかあるので、リンクをクリックするとliのアクティブクラスが削除され、クリックされた現在のliに配置されます。これは、ページがリロードされたときにアクティブなクラスが前のliに戻ったときにクリックすると機能します。ここで

は私のコード

jQuery(document).ready(function() { 
 

 
     "use strict"; 
 

 
     // Init Demo JS 
 
     Demo.init(); 
 

 

 
     // Init Theme Core 
 
     Core.init(); 
 

 
     $('.sidebar-menu > li').click(function (e) { 
 
      $(".active").removeClass("active"); 
 
      $(this).addClass("active"); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav sidebar-menu"> 
 
      <li class="sidebar-label pt20">Menu</li> 
 
      <li class="active"> 
 
       <a href="/dashboard"> 
 
        <span class="glyphicon glyphicon-home"></span> 
 
        <span class="sidebar-title">Dashboard</span> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="/fixtures"> 
 
        <span class="fa fa-calendar"></span> 
 
        <span class="sidebar-title">Fixtures</span> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="/players"> 
 
        <span class="glyphicon glyphicon-book"></span> 
 
        <span class="sidebar-title">Players</span> 
 
       </a> 
 
      </li> 
 
</ul>

私は希望リーにクラスを保つために私はjQueryで何かが足りないのですか？

Answer 1

あなたのJSはリフレッシュのコンテキストを失います。

あなたができることは、ロード中に別の機能を実行して、あなたが現在いるURLをチェックし、それに基づいてアクティブ状態を設定することです。このようなもの：

var setDefaultActive = function() { 
    var path = window.location.pathname; 

    var element = $(".sidebar-menu a[href='" + path + "']"); 

    element.addClass("active"); 
} 

setDefaultActive()