Задать вопрос

Как надо улучшить код jQuery, чтобы класс, который мы повесили, не пропадал после перезагрузки страницы?

Добрый день, у меня на странице есть несколько ненумерованных списков такого вида:

<ul>
	<li><a href="">Ссылка1</a></li>
	<li><a href="">Ссылка2</a></li>
	<li><a href="">Ссылка3</a></li>
	<li><a href="">Ссылка4</a></li>
	<li><a href="">Ссылка5</a></li>
</ul>


При нажатии на ссылку я проверяю с помощью jQuery есть ли у элемента li class active, если нет, то вешаю его.

Но проблема в том, что при нажатии на ссылку класс вещается на li, сразу же идет перезагрузка страницы, так как в li лежит тег a и естественно класс active пропадает. Как надо улучшить код jQuery, чтобы класс не пропадал после перезагрузки страницы?

Вот jQuery код:

$(function() {
                $("ul li").on('click', function(e){
                    var $this = $(this);
                    if(!$this.hasClass('active')){
                        $this.addClass("active");
                    }
                    console.log($(this));
                });
            });
  • Вопрос задан
  • 3741 просмотр
Подписаться 7 Оценить Комментировать
Решения вопроса 1
eprivalov
@eprivalov Автор вопроса
Учусь
Решил проблему:

$(document).ready(function() {
                $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
             });
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
GM2mars
@GM2mars
Ваше решение рабочее и выглядит неплохо.
А на чем у вас бекэнд? Я думаю что правильнее бекэнду разбирать урл и при отрисовке уже выставлять классы. Но это уже зависит от архитектуры приложения...
Ответ написан
IgorO2
@IgorO2
73
Ну если вы хотите перезагружать страницу, то запишите значение активного элемента в куки и доставайте его при следующей загрузке страницы.
Ответ написан
Комментировать
@Turowskiy
$(function() {
                $("ul li").on('click', function(e){
                    e.stopPropagation();
                    var $this = $(this);
                    if(!$this.hasClass('active')){
                        $this.addClass("active");
                    }
                    console.log($(this));
                });
            });

Вы нажимаете на li, срабатывает ваш код, и клик идет дальше - срабатывает переход по ссылке. e.stopPropagation(); остановит всплытие и переход по ссылке, а следовательно и перезагрузка страницы, не произойдет
Ответ написан
@lnked
То что вы хотите сделать лучше делать на стороне сервера, лучше вешать событие клика на ссылку а не на li
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы