当页面刷新 jQuery 时，活动类被删除

Question

I have a UL on my page which is acting as navigation. In my footer I have some jQuery code so when I click the link it removes the active class on the li and then places it on the current li that has been clicked. This works as I click however when the page reloads the active class goes back onto the previous li.

Here is my code

 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>

Am I missing something in my jQuery to keep the class on the desired li?

Answer 1

Your JS is losing context with the refresh.

What you can do is run another function on load to check which url you're on, and set active state based on that. Something like this:

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

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

    element.addClass("active");
}

setDefaultActive()

Answer 2

My solution is based on this link . I needed nav pills to remain active after page refresh. You can probably format this to fit your needs.

$(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();
  }
});