Jquery добавить класс и сохранить его после перезагрузки страницы.

121
13

У меня возникла проблема с добавлением добавленных классов в событие click после перезагрузки страницы.

Предположим, что у меня есть разметка:

<ul class="menu">
<a class="partial-link" href="{% url 'payment-technology-mainpage' %}"><li class="menu-first"><span class="line">ONE</span><span class="arrow">→</span></li></a>
<a class="partial-link" href="{% url 'insurance_mainpage' %}"><li class="menu-first"><span class="line">TWO</span><span class="arrow">→</span></li></a>
<a class="partial-link" href="{% url 'admin_mainpage' %}"><li class="menu-first"><span class="line">THREE</span><span class="arrow">→</span></li></a>
<a class="partial-link" href="{% url 'bok_mainpage' %}"><li><span class="line">FOUR</span><span class="arrow">→</span></li></a>
<a class="partial-link" href="{% url 'regio_dashboard' %}"><li class="menu-last"><span class="line">FIVE</span><span class="arrow">→</span></li></a>
<a class="partial-link" href="{% url 'intercity_mainpage' %}"><li class="menu-last"><span class="line">SIX</span><span class="arrow">→</span></li></a>
<a class="partial-link" href="{% url 'tickets-mainpage' %}"><li class="menu-last"><span class="line">SEVEN</span><span class="arrow">→</span></li></a>
<a class="partial-link" href="{% url 'angular-tickets' %}"><li class="menu-last"><span class="line">EIGHT</span><span class="arrow">→</span></li></a>
</ul>

Я хотел бы добавить класс "active" в "span" внутри "a" и сохранить его после перезагрузки страницы. Я попытался сделать что-то вроде этого:

var menuItem = $("span.line");
menuItem.on("click", function(e) {
menuItem.removeClass("active");
$(this).addClass("active");
});

Но это не работает :( Я буду благодарен за любые идеи.

РЕДАКТИРОВАТЬ Или, может быть, у вас есть какие-либо другие решения, чтобы сделать элементы меню цветными после нажатия на них? Проблема в том, что я хочу, чтобы они оставались цветными после перезагрузки страницы.

спросил(а) 2017-10-16T15:23:00+03:00 3 года назад
1
Решение
58

HTML является апатридом, что означает, как только вы обновите страницу, которую она воссоздает, и "забудет" все изменения, которые могли произойти во время предыдущего сеанса страницы.

Как отметил Карстен в своем комментарии, localStorage - это вариант (хотя я не очень хорошо знаком с его реализацией).

Кроме того, вы можете сохранить cookie, который обновляется каждый раз, когда выбран другой элемент меню. У большинства современных браузеров есть файлы cookie, поэтому, если вы должны были установить cookie всякий раз, когда был выбран пункт меню, то при загрузке страницы вы проверяете текущий файл cookie, а затем выделяете элемент menuItem соответствующим образом. Файл cookie может хранить определенный идентификатор элемента меню или другой уникальный идентификатор.

ответил(а) 2017-10-16T15:27:00+03:00 3 года назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема