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=".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>

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./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?

• javascript
• jquery
• html
• css

• It's not working because you're put active class only when you click on li item. You need to write some code to check current page. – ray Commented Jan 24, 2017 at 8:15
• It is working the way it supposed to work. After reloading page active class function will only work while clicking on anchor tag. – Abhishek Pandey Commented Jan 24, 2017 at 8:19
• localStorage – urbz Commented Jan 24, 2017 at 8:21

2 Answers 2

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()

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