Как сохранить активный class при смене страниц

Я пытаюсь добавить активный class к nav item, в зависимости от того, на какой странице вы находитесь. Я использую этот скрипт:

 $(document).ready(function () { $("#side-bar a").click(function () { var id = $(this); $(id).siblings().find(".active").removeClass("active"); $(id).addClass("active"); localStorage.setItem("selectedolditem", id); }); var selectedolditem = localStorage.getItem('selectedolditem'); if (selectedolditem !== null) { $(selectedolditem).siblings().find(".active").removeClass("active"); $(selectedolditem).addClass("active"); } });  

См. Полный jsfiddle здесь: https://jsfiddle.net/ebo7hLo9/ Он добавляет активный class, но он загружает новую страницу, она исчезает. Что я делаю не так?

https://jsfiddle.net/ebo7hLo9/10/ – вот скрипка!

 $(document).ready(function () { $("#side-bar a").click(function () { var id = $(this); $(".active").removeClass("active"); $(id).addClass("active"); localStorage.setItem("selectedolditem", $(id).text()); }); var selectedolditem = localStorage.getItem('selectedolditem'); if (selectedolditem !== null) { $("a:contains('" + selectedolditem + "')").addClass("active"); } }); . $(document).ready(function () { $("#side-bar a").click(function () { var id = $(this); $(".active").removeClass("active"); $(id).addClass("active"); localStorage.setItem("selectedolditem", $(id).text()); }); var selectedolditem = localStorage.getItem('selectedolditem'); if (selectedolditem !== null) { $("a:contains('" + selectedolditem + "')").addClass("active"); } }); 

В вашем коде были проблемы с запоминанием того, какой элемент нужно захватить. Я думаю, что это связано с незнанием веб-хранилища API с объектами. Вместо этого я получил текст из выбранного элемента, сохранил его в localStorage и на загрузке страницы сопоставил его с правильным элементом. Также была часть вашего кода, которая имела дело с поиском classа «active» в пределах siblings() выбранного элемента и его удаления. Этот комплекс кода в значительной степени не нужен. Я заменил его селектором classов $(".active")

Я не изменил это в коде, но я бы посоветовал не использовать localStorage в пользу sessionStorage чтобы хранилище sessionStorage при sessionStorage вкладки / браузера.

Для получения дополнительной информации просмотрите эту предыдущую запись stackoverflow: Хранение объектов в HTML5 localStorage

Вот возможное решение: https://jsfiddle.net/6yyLpma1/

  $("#side-bar a").click(function () { var id = $(this); $('#side-bar').find(".active").removeClass("active"); $(id).addClass("active"); localStorage.setItem("selectedolditem", id); }); .  $("#side-bar a").click(function () { var id = $(this); $('#side-bar').find(".active").removeClass("active"); $(id).addClass("active"); localStorage.setItem("selectedolditem", id); }); 

Вместо $(id).siblings() используйте $('#side-bar') . Используйте ту же логику в другом месте.

Использование элементов данных и функции делегата: https://jsfiddle.net/ebo7hLo9/12/

HTML

    

Javascript

 $(document).ready(function () { $('#delegateAnchor').on('click', '#side-bar a', function() { var $this = $(this); var linkId = $this.data('desc'); $this.closest('ul').find('a').removeClass("active"); $this.addClass("active"); localStorage.setItem("menuSelection", linkId); }); var selectedLinkId = localStorage.getItem("menuSelection"); if (selectedLinkId !== null) { $('#side-bar a[data-desc="'+ selectedLinkId +'"]').trigger("click"); } });