Jquery addClass не является постоянным

Question

У меня есть веб-приложение, которое я разрабатываю в Django.Я хочу иметь простой способ отследить, где пользователь находится на сайте.Поэтому я решил изменить CSS элемента, по которому щелкнули меню.

Я добавил этот простой фрагмент кода.

 <script type="text/javascript">
        $(document).ready(function(){

        $(".up_menu_item").click(function(){
                $(this).addClass("green");
                var excludeThis = $(this);
                $(".up_menu_item").not(excludeThis).each(function(){
                        $(this).removeClass("green");
                });
        });

        });
        </script>

Когда я нажимаю на элемент меню, цвет меняется, но сразу возвращается к значению по умолчанию.Элемент, на который я нажимаю, - это теги, которые перенаправляют пользователя на другой URL.Но меню (и javascript) всегда включены в вызываемые URL, поэтому я подумал, что класс останется.начинает сводить меня с ума!

Answer 1

Javascript не подходит для этого. Как говорит Ким в комментарии, когда вы перезагрузите страницу, ваш класс больше не будет присутствовать.

Поскольку вы используете Django, способ сделать это - использовать шаблон Django - для каждого URL в вашем меню проверьте, соответствует ли он текущему URL, и добавьте класс, если так.

Редактировать Вы можете получить текущий URL от request.path, если вы передали запрос в свой шаблон (это происходит автоматически, если вы включили обработчик контекста запроса ).

Answer 2

Когда вы переходите на другую страницу, все изменения, примененные с помощью Javascript (или, естественно, jQuery), исчезают. Страница загружается как обычно. Все сделанные изменения применяются только к текущей странице . Он не изменяет страницы, которые появляются после.

Вы можете проверить, какая страница открывается при загрузке страницы, и изменить цвет соответствующей кнопки. Лучший способ - использовать свой язык программирования на стороне сервера (в вашем случае это Python с каркасом Django) для добавления класса, если страница соответствует правой кнопке.

Answer 3

Не проще ли удалить класс из всех элементов перед его чтением в новый элемент?

$(".up_menu_item").click(function(){
    $($(this).attr('class')).removeClass();
    $(this).addClass("green");
});