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

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

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

банально, есть обычная менюшка навигации сайта, нужно сделать подсветку текущего выбранного меню
(просто добавить класс,ну и соответственно удалить с предыдущей) как это правильно сделать?
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.03.2014, 03:32
Ответы с готовыми решениями:

Как двигать подсветку в меню?
Здравствуйте дорогие форумчане. Столкнулся с такой проблемой. Есть меню, и есть...

Необходимо сделать подсветку возраста
Я только начал изучать JavaScript. Хотел написать что нибудь...

Сделать подсветку всех div на страницы
Здравствуйте, задача, при наведении на все div которые есть на страницы...

Выделение выбранного пункта меню
Необходимо выделить выбранный пункт меню. Никак не получается этого добиться. В...

Оптимизация: изменить цвет кнопки и её значение в зависимости от выбранного элемента выпадающего меню
Добрый день! Изучаю jquery c азов, не могли бы подсказать как можно сократить и...

6
Padimanskas
Superposition
935 / 596 / 256
Регистрация: 27.10.2013
Сообщений: 2,069
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
rizr
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
mr nobody
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
rizr
1 / 1 / 2
Регистрация: 13.01.2013
Сообщений: 71
24.03.2014, 00:20  [ТС] 5
не работает и всё, вот прилагаю архив
0
Вложения
Тип файла: rar qqq.rar (181.2 Кб, 2 просмотров)
mr nobody
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
rizr
1 / 1 / 2
Регистрация: 13.01.2013
Сообщений: 71
24.03.2014, 00:31  [ТС] 7
ахахах да видно мне пора спать идти уже ))))))
0
24.03.2014, 00:31
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.03.2014, 00:31

Проверка текущего url до знака для активного пункта меню
Нужна проверка на текущий url, чтобы пункт активным оставался. Написал скрипт,...

Как сделать select с запоминанием выбранного ранее состояния option?
&lt;select name=&quot;select&quot;&gt; &lt;option value=&quot;1&quot;&gt;1&lt;/option&gt; &lt;option...

Как сделать переход к опр. странице в зав-ти от выбранного значения в селекте?
Как сделать переход к опр. странице в зав-ти от выбранного значения в селекте....


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

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

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