Как при помощи jQuery добавить/убрать класс в ul li a списке?

sparco 31.10.2014 Шаблоны (TPL), jQuery 3197

вопрос

Доброго дня! Предположим, имеется следующее меню в шапке сайта:


<nav>
 <ul class="head_menu">
  <li><a href="#fakelink">Пункт меню</a></li>
  <li><a href="#fakelink">Пункт меню</a></li>
  <li><a href="#fakelink">Пункт меню</a></li>
  <li><a href="#fakelink">Пункт меню</a></li>
  <li><a href="#fakelink">Пункт меню</a></li>
  <li><a href="#fakelink">Пункт меню</a></li>
</ul>
</nav>

Так вот вопрос в следующем: как сделать, что бы при переходе по какому-либо из пунктов меню добавлялся класс active или current и убирался с предедущего? Вопрос может и баянистый, и многие скажут, мол, иди гугли, ответов тысяча. согласен, их много. Перепробовал более десятка вариантов и не один толком не заработал. Максимум что мне удалось - это добавить класс к выбранному анкору до загрузки страницы. После загрузки этот класс пропадает, почему-то.

Ответил: FastFud

Пример

3 комментария

Юзер

1599

FastFud - 2015-02-2431 октября 2014 13:06 - #36999

***Комментарий удален***

Юзер

sparco - 2015-02-2431 октября 2014 16:30 - #37012

FastFud, К сожалению данный способ не работает. Если к примеру создать 4 html документа с вот таким содержанием:

Показать / Скрыть текст


<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Add & remove active class from ul li a</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script>
$('ul li a').click(function() {
    $('ul li').removeClass('active');
    $(this).closest('li').addClass('active');
});
</script>
<style>
    body {margin: 0 auto; font-size: 15px;}
    a {color: blue;}
    nav {margin-top: 25px;}
    li.active, li.active a {
        color: red;
    }
    .head_nav {display: inline-block; list-style: none;}
    .head_nav > li {float: left; margin-right: 10px;}    
</style>
</head>
<body>
    <nav>
        <ul class="head_nav">
            <li><a href="1.html" class="active">menu 1</a></li>
            <li><a href="2.html">menu 2</a></li>
            <li><a href="3.html">menu 3</a></li>
            <li><a href="4.html">menu 4</a></li>
        </ul>
    </nav>
</body>
</html>

то класс не добавляется при переходе на другую страницу...

Юзер

1599

FastFud - 2015-02-2431 октября 2014 17:25 - #37016

Смотрите тут

non-stop | Как решить проблему индексации DLE в пои ... ¹

non-stop
Как решить проблему индексации DLE в поиске Bing?
19-12-2024, 17:02

Забыл написать что обновился до последней версии 17.3
Интересно узнать, это только у меня проблема, или это проблема движка? проверьте свои сайты на наличие в поиске Bing.
В 11 винде именно эта поисковая система стоит по умолчанию . кроме того эта же поисковая система отвечает за индекс еще одного поисковика - yahoo. Эти системы могут давать дополнительный процент пискового трафика на сайты.
lutskboy | Как максимально грамотно организовать до ... ¹

lutskboy
Как максимально грамотно организовать добавление материалов через SQL-запросы?
18-12-2024, 21:39

все верно. related_ids автоматом заполняется потом.
derebas | Убираем xfsearch из адресной строки ⁷

derebas
Убираем xfsearch из адресной строки
16-12-2024, 02:35

в правилах транслитерации для tagvalue поставьте замену " " => "-", например так
str_replace(array('.', ' ', '/', '&', "'", '+', '«', '»', ':', '!'), array('', '-', '-', 'and', '', '', '', '', '', '')
toxicpioner | Убираем xfsearch из адресной строки ⁷

toxicpioner
Убираем xfsearch из адресной строки
15-12-2024, 19:31

если в доп поле есть пробел, будет выдавать просто 403 стр
dj-avtosh | Воспользовался хаком удаление html из ад ... ²

dj-avtosh
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
12-12-2024, 17:26

Нужно правило с year поднять выше всех в .htaccess
TeraMoune | Воспользовался хаком удаление html из ад ... ²

TeraMoune
Воспользовался хаком удаление html из адресной строки у новости, появилась ошибка, как пофиксить?
11-12-2024, 22:12

У вас убрано слишком много отличительных признаков в ссылках и теперь ссылки пересекаются. Убрали xfsearch, убрали html, а так же зачем то убрали дефиз разделяющий id и alt_name. Теперь некоторые ссылки будут отвечать выражению под правила ссылок новостей. Исправить вы можете только переосмыслив эти ссылки и добавить в них каких-то отличительных особенностей, переосмыслить чпу.
toxicpioner | Как упорядочить ID новостей ¹⁹

toxicpioner
Как упорядочить ID новостей
9-12-2024, 22:24

***Комментарий удален***
DnCnv | Как показать только одну категорию, к ко ... ¹

DnCnv
Как показать только одну категорию, к которой принадлежит новость?
9-12-2024, 01:46

***Комментарий удален***
web102 | Почему не отображается картинка в галере ... ³

web102
Почему не отображается картинка в галерее?
4-12-2024, 11:49

дайте адрес сайта. можно в личку
Shandi | Почему не отображается картинка в галере ... ³

Shandi
Почему не отображается картинка в галерее?
3-12-2024, 08:53

Мне как ламеру ничего не понятно:( Кто-то это исправляет за денужку?