Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
1 / 1 / 2
Регистрация: 13.01.2013
Сообщений: 71
1

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

21.03.2014, 03:32. Показов 1033. Ответов 6
Метки нет (Все метки)

банально, есть обычная менюшка навигации сайта, нужно сделать подсветку текущего выбранного меню
(просто добавить класс,ну и соответственно удалить с предыдущей) как это правильно сделать?
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.03.2014, 03:32
Ответы с готовыми решениями:

Нужно реализовать подсветку текущего раздела меню
Есть сайт-каталог. В нем я создал меню (контроллер, модель и частичное представление, которые,...

Сделать подсветку активного меню
Добрый день! У меня выводится меню в цикле на каждую страницу ПУ(админки) и я хочу что бы когда я...

Как сделать подсветку для активного пункта меню?
есть несколько функций-получение массива и вывод полученного с помощью рекурсивной функции..вот код...

Как сделать подсветку меню страницы, на которой находишься?
Добрый день. Сейчас разрабатываю многостраничный сайт. Как сделать так, чтобы страница, на...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
6
Superposition
948 / 614 / 256
Регистрация: 27.10.2013
Сообщений: 2,084
21.03.2014, 04:11 2
Цитата Сообщение от 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');
});
1
1 / 1 / 2
Регистрация: 13.01.2013
Сообщений: 71
23.03.2014, 23:13  [ТС] 3
не работает
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');
});
0
0 / 0 / 2
Регистрация: 23.03.2014
Сообщений: 9
23.03.2014, 23:56 4
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>
0
1 / 1 / 2
Регистрация: 13.01.2013
Сообщений: 71
24.03.2014, 00:20  [ТС] 5
не работает и всё, вот прилагаю архив
0
Вложения
Тип файла: rar qqq.rar (181.2 Кб, 3 просмотров)
0 / 0 / 2
Регистрация: 23.03.2014
Сообщений: 9
24.03.2014, 00:26 6
Лучший ответ Сообщение было отмечено rizr как решение

Решение

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>
0
1 / 1 / 2
Регистрация: 13.01.2013
Сообщений: 71
24.03.2014, 00:31  [ТС] 7
ахахах да видно мне пора спать идти уже ))))))
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
24.03.2014, 00:31

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Календарь на PowerShell: добавить подсветку текущего дня
Есть старый скрипт, найденный в свое время на двинувшем ныне копыта poshcode.org. function...

Как сделать отображение галочкой выбранного пункта меню в MenuStrip?
Как сделать отображение галочкой выбранного пункта меню в MenuStrip?

Как сделать фон для текущего пункта меню?
Как сделать фон для текущего пункта меню, т.е. для пункта, на странице которого я нахожусь (не...

Не могу понять как сделать изменение цвета выбранного пункта меню
Пробовал через присваивание нового класса не получилось, может кто-то поможет &lt;ul...

Удаление текущего (выбранного) каталога
Ребят, возникла следующая проблема. Работаю с реальной файловой системой, использую компонент...

Получение строки текущего выбранного элемента ComboBox
Вопрос в теме - в комбобоксе несколько элементов, при выборе одного из них я хочу получить текст...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.