Сделать подсветку текущего выбранного меню

@rizr · Регистрация: 13.01.2013

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

банально, есть обычная менюшка навигации сайта, нужно сделать подсветку текущего выбранного меню
(просто добавить класс,ну и соответственно удалить с предыдущей) как это правильно сделать?

@Padimanskas · 21.03.2014, 04:11

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

нужно сделать подсветку текущего выбранного меню
(просто добавить класс,ну и соответственно удалить с предыдущей) как это правильно сделать?

JavaScript
1
2
3
 $( 'МЕНЮ' ).on('click', 'ПУНКТЫ МЕНЮ', function(){
    $(this).toggleClass('КЛАСС').siblings().removeClass('КЛАСС');
});

пример:

JavaScript
1
2
3
 $( 'ul#menu' ).on('click', 'li', function(){
    $(this).toggleClass('checked').siblings().removeClass('checked');
});

@rizr · 23.03.2014, 23:13 **[ТС]**

не работает

HTML5
1
2
3
4
5
6
7
8
 <ul id="mainHeaderNav">
      <li><a class="home" href="#"><img src="img/home.png" /></a></li>
      <li><a class="blackberry" href="#">BLACKBERRY</a></li>
      <li><a class="htc" href="#">HTC</a></li>
      <li><a class="samsung" href="#">SAMSUNG</a></li>
      <li><a class="sony" href="#">SONY ERICSSON</a></li>
      <li><a class="iphone" href="#">IPHONE</a></li>
    </ul>

JavaScript
1
2
3
 $( '#mainHeaderNav' ).on('click', 'li', function(){
    $(this).toggleClass('checked').siblings().removeClass('checked');
});

@mr nobody · 23.03.2014, 23:56

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul id="mainHeaderNav">
      <li><a class="home" href="#"><img src="img/home.png" /></a></li>
      <li><a class="blackberry" href="#">BLACKBERRY</a></li>
      <li><a class="htc" href="#">HTC</a></li>
      <li><a class="samsung" href="#">SAMSUNG</a></li>
      <li><a class="sony" href="#">SONY ERICSSON</a></li>
      <li><a class="iphone" href="#">IPHONE</a></li>
    </ul>
 
<script>
$(document).ready( function(){
   $("#mainHeaderNav li").click( function(){
      $("#mainHeaderNav li").removeClass("active");
      $(this).addClass("active");
   });
});
</script>
 
<style>
#mainHeaderNav li.active{
   background: red;
}
</style>

@rizr · 24.03.2014, 00:20 **[ТС]**

не работает и всё, вот прилагаю архив

@mr nobody · 24.03.2014, 00:26

HTML5
1
2
3
4
5
6
7
8
<script type="text/javascript" src="scripts/jquery.js">
 $(document).ready( function(){
 $("#mainHeaderNav li a").click( function(){
      $("#mainHeaderNav li a").removeClass("active");
      $(this).addClass("active");
   });
});
</script>

Это что?

Так должно быть:

HTML5
1
2
3
4
5
6
7
8
9
<script type="text/javascript" src="scripts/jquery.js"></script>
<script>
 $(document).ready( function(){
 $("#mainHeaderNav li a").click( function(){
      $("#mainHeaderNav li a").removeClass("active");
      $(this).addClass("active");
   });
});
</script>

@rizr · 24.03.2014, 00:31 **[ТС]**

ахахах да видно мне пора спать идти уже ))))))

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@rizr 1 / 1 / 2 Регистрация: 13.01.2013 Сообщений: 71

	Сделать подсветку текущего выбранного меню 21.03.2014, 03:32. Показов 1499. Ответов 6 Метки нет (Все метки) банально, есть обычная менюшка навигации сайта, нужно сделать подсветку текущего выбранного меню (просто добавить класс,ну и соответственно удалить с предыдущей) как это правильно сделать? 0

@rizr 1 / 1 / 2 Регистрация: 13.01.2013 Сообщений: 71
	24.03.2014, 00:31 [ТС]
	ахахах да видно мне пора спать идти уже )))))) 0

Сделать подсветку текущего выбранного меню

Решение