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

Question

[Петр Волханов]

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

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

Answer 1

[Петр Волханов]

Решил проблему:

$(document).ready(function() {
                $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
             });

Comments

[Борис Шепелев]

красивый и самое главное правильный код!

Answer 2

[GM2mars]

Ваше решение рабочее и выглядит неплохо.
А на чем у вас бекэнд? Я думаю что правильнее бекэнду разбирать урл и при отрисовке уже выставлять классы. Но это уже зависит от архитектуры приложения...

Comments

[Петр Волханов]

Бэкенд на Yii...

[GM2mars]

Ну вот и прекрасно, разбирайте урл на бекэнде, зачем лишний раз дергать js. На Yii по моему это просто сделать (не знаток данного фреймворка, но знаю что есть функции для работы со списками навигации)

Answer 3

[1001001 111]

Ну если вы хотите перезагружать страницу, то запишите значение активного элемента в куки и доставайте его при следующей загрузке страницы.

Answer 4

[Женя Т]

$(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(); остановит всплытие и переход по ссылке, а следовательно и перезагрузка страницы, не произойдет

Comments

[Петр Волханов]

Не то, так как теперь вообще нельзя нажать на элемент. Браузер Google Chrome последней версии..

[1001001 111]

@eprivalov добавьте в <a href="#"></a>

Answer 5

[lnked]

То что вы хотите сделать лучше делать на стороне сервера, лучше вешать событие клика на ссылку а не на li