Как сделать, чтобы Окрашивался выбранный пункт меню, в который перешёл

@vlad51 · Регистрация: 25.07.2015

Студворк — интернет-сервис помощи студентам

Есть готовое меню.
Как сделать, чтобы при переходе по Выбранному пункту меню, он был окрашен.
Т.е. чтобы цвет на нём зафиксировался, и не пропадал, пока не переду в другой пункт.

Вот ссылка сразу для онлайн правки: https://jsfiddle.net/to20go61/
Там и html и css стили.

@AlexBBB · 14.02.2016, 15:49

Creativeman, Fedor92,
Немного переделал под себя, так как имеются динамические ссылки, получился вот такой вариант:

JavaScript
1
2
3
4
5
6
7
8
$(function() {
    var url = window.location.href;
    $("#main-menu a").each(function() {
        if (~url.indexOf(this.href)) {
            $(this).closest("li").addClass("active");
        }
    });
});

Все работает, без ajax

@Fedor92 · 14.02.2016, 16:01

AlexBBB, можно полный код вместе с меню? Интересно же.. А vlad51 и Вы это один человек? Тоже интересно...

@AlexBBB · 14.02.2016, 16:08

Fedor92,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<nav id="main-menu" class="main-menu">
<ul>
<li>
<a href="?view=offers">Акции</a>
</li>
<li>
<a href="?view=about">О нас</a>
</li>
<li class="active">
<a href="?view=news">Новости</a>
</li>
<li>
<a href="?view=payment">Оплата</a>
</li>
<li>
<a href="?view=delivery">Доставка</a>
</li>
<li>
<a href="?view=contacts">Контакты</a>
</li>
</ul>
</nav>
</header>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
$(function() {
    var url = window.location.href;
    $("#main-menu a").each(function() {
        if (~url.indexOf(this.href)) {
            $(this).addClass("active");
        }
    });
});

Меню одно на весь сайт

@Fedor92 · 14.02.2016, 16:14

Гуд, только активный класс не работает...

@AlexBBB · 14.02.2016, 16:16

Fedor92, Очень странно, потому что у меня все прекрасно работает. К сожалению не могу вам выслать весь проект, чтобы вы проверили, да и врать мне смысла нет никакого)))

@Fedor92 · 14.02.2016, 16:26

Сообщение от AlexBBB

Fedor92, Очень странно, потому что у меня все прекрасно работает. К сожалению не могу вам выслать весь проект, чтобы вы проверили, да и врать мне смысла нет никакого)))

Да мне по большому счёту всё равно...

Получилось и слава Богу... Меня генерация динамической ссылки больше порадовала... Нестандартный ход...

Добавлено через 7 минут
Блин, jquery же не подключен...

@AlexBBB · 14.02.2016, 16:30

Блин, точно...

Только сейчас кстати заметил, active у меня задается для самой ссылки а не для li, а в коде сам класс вообще не нужен.

@Fedor92 · 14.02.2016, 16:35

Сообщение от AlexBBB

Только сейчас кстати заметил, active у меня задается для самой ссылки а не для li, а в коде сам класс вообще не нужен.

Ага, иначе дублируется... В принципе активный класс можно задать и ссылке, если она растянута по ширине и высоте li...

@AlexBBB · 14.02.2016, 16:43

Fedor92, У меня ссылки в виде кнопок на этом сайте, и так что в данном случае, только так)

@Fedor92 · 14.02.2016, 16:46

AlexBBB, а какая cms, если не секрет?

@AlexBBB · 14.02.2016, 16:47

Fedor92, Не секрет, пишу с нуля)))

@Fedor92 · 14.02.2016, 16:52

Сообщение от AlexBBB

Fedor92, Не секрет, пишу с нуля)))

Ну тогда удачи в разработках... Ссылки либо php генерируете?

@AlexBBB · 14.02.2016, 17:01

Fedor92, спасибо), php

@Fedor92 · 14.02.2016, 17:03

Не по теме:

Сообщение от AlexBBB

Fedor92, спасибо), php

Тогда вопросов нет... :) Всё логично...

Новые блоги и статьи Все статьи Все блоги /
Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .	Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .

@vlad51 0 / 0 / 0 Регистрация: 25.07.2015 Сообщений: 4

	Как сделать, чтобы Окрашивался выбранный пункт меню, в который перешёл 13.02.2016, 21:24. Показов 4357. Ответов 33 Метки css, css3, html, меню, стили (Все метки) Есть готовое меню. Как сделать, чтобы при переходе по Выбранному пункту меню, он был окрашен. Т.е. чтобы цвет на нём зафиксировался, и не пропадал, пока не переду в другой пункт. Вот ссылка сразу для онлайн правки: https://jsfiddle.net/to20go61/ Там и html и css стили. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	14.02.2016, 16:01
	AlexBBB, можно полный код вместе с меню? Интересно же.. А vlad51 и Вы это один человек? Тоже интересно... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	14.02.2016, 16:14
	Гуд, только активный класс не работает... 0

@AlexBBB 22 / 22 / 9 Регистрация: 16.03.2015 Сообщений: 193
	14.02.2016, 16:16
	Fedor92, Очень странно, потому что у меня все прекрасно работает. К сожалению не могу вам выслать весь проект, чтобы вы проверили, да и врать мне смысла нет никакого))) 0

@AlexBBB 22 / 22 / 9 Регистрация: 16.03.2015 Сообщений: 193
	14.02.2016, 16:30
	Блин, точно... Только сейчас кстати заметил, active у меня задается для самой ссылки а не для li, а в коде сам класс вообще не нужен. 0

@AlexBBB 22 / 22 / 9 Регистрация: 16.03.2015 Сообщений: 193
	14.02.2016, 16:43
	Fedor92, У меня ссылки в виде кнопок на этом сайте, и так что в данном случае, только так) 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	14.02.2016, 16:46
	AlexBBB, а какая cms, если не секрет? 0

@AlexBBB 22 / 22 / 9 Регистрация: 16.03.2015 Сообщений: 193
	14.02.2016, 16:47
	Fedor92, Не секрет, пишу с нуля))) 0

@AlexBBB 22 / 22 / 9 Регистрация: 16.03.2015 Сообщений: 193
	14.02.2016, 17:01
	Fedor92, спасибо), php 0