當頁面刷新 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 中遺漏了一些東西來使類保持在所需的 li 上？

Answer 1

您的 JS 因刷新而丟失上下文。

您可以做的是在加載時運行另一個函數來檢查您所在的網址，並根據它設置活動狀態。 像這樣的東西：

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

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

    element.addClass("active");
}

setDefaultActive()

Answer 2

我的解決方案基於此鏈接。 我需要導航葯丸在頁面刷新后保持活動狀態。 您可以格式化它以滿足您的需求。

$(document).ready(function () {
  // On page load
  $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
    // Get the id for the pill that was last shown and set it to local storage
    localStorage.setItem('activeLink', $(e.currentTarget).attr('id'));
  });
  // After page loaded
  // Get the id for the pill from local storage
  var activeLink = localStorage.getItem('activeLink');
  // If it's there, click it
  if (activeLink) {
    $(`#${activeLink}`).click();
  }
});