С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.62/21: Рейтинг темы: голосов - 21, средняя оценка - 4.62
0 / 0 / 0
Регистрация: 26.06.2015
Сообщений: 159

Как сделать пункт меню активиным?

19.10.2015, 15:55. Показов 4192. Ответов 9
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
сайт http://eurookna.company
В шапке сайта есть пункт меню "Продукция" при нажатии на который открывается страница с подпунктами меню. Как сделать чтобы пункт меню "Продукция" в шапке сайта оставался активным (Подсвечивался) когда мы перемещаемся по подпунктам меню?
Сейчас пункт меню "Продукция" подсвечивается только после его выбора. А если например выбрать другой подпункт, то подсветка исчезает.
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
19.10.2015, 15:55
Ответы с готовыми решениями:

Сделать выбранным пункт меню в зависимости от открытой страницы
Есть разметка мастер страницы (это ASP.NET MVC): <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta...

Как выделить цветом активный пункт меню?
Друзья, есть страница http://539687.fdcorp.web.hosting-test.net/index.php/kran-sharovoy-vv-ruchka.html Слева меню (в левом сайдбаре)....

Как средствами JavaScript можно добавить пункт в контекстном меню в ИЕ?
Господа JavaScript'еры. Подскажите как средствами JavaScript можно добавить пункт в контекстном меню в ИЕ. И если не на JS, то как? ...

9
Модератор
Эксперт 1С
 Аватар для Yulunga
4126 / 934 / 263
Регистрация: 22.04.2013
Сообщений: 6,535
Записей в блоге: 1
19.10.2015, 16:07
по клику на ul>li присваивать тому диву ( где класс razdel ) ещё и актив. ну или , если это вызовет нарекание со стороны бутстрапа - свой класс написать(цвет и буковки нужным колором ). корявенько, но работать будет, кмк )
0
0 / 0 / 0
Регистрация: 26.06.2015
Сообщений: 159
19.10.2015, 16:22  [ТС]
Не совсем понял.. Можно немного поподробнее пожалуйста.
Вы имеете ввиду пункт меню в левом сайдбаре или меню в шапке сайта? Мне нужна подсветка пункта меню в шапке сайта.
У меня вроде бы где класс razdel, в нужном материале, нужному диву присваивается active. Но это делает актвиным пункт меню в левом сайдбаре. А мне нужно в шапке сайта.
0
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
19.10.2015, 16:44
Цитата Сообщение от sergey_ku Посмотреть сообщение
Мне нужна подсветка пункта меню в шапке сайта.
Вы хотите чтобы взамодействовали 2 абсолютно не связанных между собой элемента. Это делается с помощью JS.
Вот вам костыльный вариант, можете пилить его.
JavaScript
1
2
3
4
var razdel = document.querySelector(".razdel");
if(razdel.innerHTML.toLowerCase().indexOf("продукция")+ 1){
  document.querySelector(".nav.menu li.item-102").classList.add('active');
}
Если хотите поддержку старых IE замените classList.
0
Модератор
Эксперт 1С
 Аватар для Yulunga
4126 / 934 / 263
Регистрация: 22.04.2013
Сообщений: 6,535
Записей в блоге: 1
19.10.2015, 16:47
JavaScript
1
2
3
4
$('ul li').on('click', function() {
    $('.item-102').css({ 'backround': 'yellow',
                                'color': 'green' });
}
где-то так
Shakalaka, там у него jQuery уже подключен, так что можно им.
0
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
19.10.2015, 17:14
Цитата Сообщение от Yulunga Посмотреть сообщение
где-то так
Совсем не так. Во-первых, кликаем мы не по <li>, а по <a> и при клике на <a> осуществится переход на другую страницу и вся ваша "красота" не будет работать. Во-вторых, нам нужно подсвечивать пункт меню "продукция" если мы перешли по одной из ссылок субменю "продукция", а не по всем <li> на странице.
П.С.
Цитата Сообщение от Yulunga Посмотреть сообщение
ам у него jQuery уже подключен, так что можно им
Зачем использовать "его" когда там 2 строчки кода на чистом JS?
0
0 / 0 / 0
Регистрация: 26.06.2015
Сообщений: 159
19.10.2015, 17:17  [ТС]
А куда именно этот код вставлять? В материал или в index.php активной темы? Или куда то в другое место?
Вот допустим код одного из нужного материала:
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
<div class="leftmenu">
 
<div class="razdel">
Продукция
</div>
<ul>
<li><a href="/okonnye-sistemy-rehau.html">ОКОННЫЕ СИСТЕМЫ REHAU</a></li>
<li><a href="/okonnye-sistemy-kbe.html">ОКОННЫЕ СИСТЕМЫ KBE</a></li>
<li><a href="/okonnye-sistemy-veka.html">ОКОННЫЕ СИСТЕМЫ VEKA</a></li>
<li><div class="active"><a href="/okna-i-dveri-alyuminij.html">ОКНА И ДВЕРИ АЛЮМИНИЙ</a></li>
<li><a href="/rolshtory-i-zhalyuzi.html">РОЛЬШТОРЫ И ЖАЛЮЗИ</a></li> 
<li><a href="/gotovye-okna.html">ГОТОВЫЕ ОКНА</a></li>
<li><a href="/arkhitektoram-i-dizajneram.html">АРХИТЕКТОРАМ И ДИЗАЙНЕРАМ</a></li>
</ul>
</div>
<font color="#b0356a" size="5" >Профессиональное остекление балконов и лоджий</font>
{tab=описание}
<p>Остекление балконов и лоджий осуществляется профессиональными монтажниками, они не только создают наиболее комфортные условия работы и производят монтаж в кратчайшие сроки, но и делают остекление профессионально, быстро, грамотно и качественно. Лучшее остекление балконов и лоджий осуществляется с использованием высокосовременных материалов. Профессионально подходя к проблеме остекления, наши специалисты создают надежные, красивые и удобные  оконные профиля, которые выглядят вполне естественно.  Мы остекляем балконы и лоджии по вашему индивидуальному вкусу.  </p>
{gallery width=100 height=100}balkony_and_lodzhy{/gallery}
{tab=Преимущества}
<p>Создавая условия для осуществления профессионального монтажа, мы стремимся подчеркнуть красоту и безупречность создаваемых конструкций. У нас профессиональное остекление производится за полчаса -  час, при необходимости мы подберем все нужные материалы для Вашего балкона или лоджии. Также, мы стараемся создавать надежные стеклопакеты, которые очень легко вписываются в пространство вашего помещения. Наши монтажники производят работу на должном уровне, сдавая ее строго в срок.</p>
{gallery width=100 height=100}balkony_and_lodzhy{/gallery}
{tab=Область применения}
<p>Остекление лоджии производится с применением самого высококлассного оборудования, при этом, мы стремимся подчеркивать всю красоту и индивидуальность создаваемой работы. Наши монтажники заботятся о высоком качестве работы, стремясь создавать остекление с применением высоконадежных и прочных материалов. Наши работы по остеклению всегда отличаются высоким качеством!</p>
 {gallery width=100 height=100}balkony_and_lodzhy{/gallery}
<script type="text/javascript">
    $('ul#nav li').each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "active";});
</script>
Приведите пожалуйста пример как правильно все оформить.
0
Модератор
Эксперт 1С
 Аватар для Yulunga
4126 / 934 / 263
Регистрация: 22.04.2013
Сообщений: 6,535
Записей в блоге: 1
19.10.2015, 17:27
ага, согласен. виноват. исправлюсь.
sergey_ku, между тегами скрипт.
0
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
19.10.2015, 17:37
Лучший ответ Сообщение было отмечено sergey_ku как решение

Решение

Цитата Сообщение от sergey_ku Посмотреть сообщение
А куда именно этот код вставлять?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="razdel">
Продукция
</div>
<ul>
<li><a href="/okonnye-sistemy-rehau.html">ОКОННЫЕ СИСТЕМЫ REHAU</a></li>
<li><a href="/okonnye-sistemy-kbe.html">ОКОННЫЕ СИСТЕМЫ KBE</a></li>
<li><a href="/okonnye-sistemy-veka.html">ОКОННЫЕ СИСТЕМЫ VEKA</a></li>
<li><div class="active"><a href="/okna-i-dveri-alyuminij.html">ОКНА И ДВЕРИ АЛЮМИНИЙ</a></li>
<li><a href="/rolshtory-i-zhalyuzi.html">РОЛЬШТОРЫ И ЖАЛЮЗИ</a></li> 
<li><a href="/gotovye-okna.html">ГОТОВЫЕ ОКНА</a></li>
<li><a href="/arkhitektoram-i-dizajneram.html">АРХИТЕКТОРАМ И ДИЗАЙНЕРАМ</a></li>
</ul>
</div>
<script>
var razdel = document.querySelector(".razdel");
if(razdel.innerHTML.toLowerCase().indexOf("продукция")+ 1){
  document.querySelector(".nav.menu li.item-102").classList.add('active');
}
</script>
0
0 / 0 / 0
Регистрация: 26.06.2015
Сообщений: 159
19.10.2015, 17:43  [ТС]
Shakalaka, Все понял.
Спасибо за помощь.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
19.10.2015, 17:43
Помогаю со студенческими работами здесь

Скрыть пункт в меню
Есть меню &lt;ul class=&quot;catalog_collections_menu&quot;&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;/a&gt;&lt;/li&gt; ...

Выделить активный пункт меню
Доброго дня. Дано: - 3 кнопки меню &quot;1&quot;,&quot;2&quot;,&quot;3&quot; (оранжевого цвета, тег &lt;a&gt; снаружи кнопки, т.е. срабатывает по всей кнопке) ...

Выделить активный пункт меню при динамическом получении страниц
В общем помогите, пожалуйста. Нужно выделить активный пункт меню (т.е. тот, на котором я нахожусь в данный момент). Искала примеры на...

Изменение фона страницы при наведении курсора на пункт (ссылку) меню
Доброго времени суток! Подскажите, пожалуйста, как сделать так, чтобы при наведении курсора на пункт (ссылку) меню фон страницы...

Как сделать так, чтобы после нажатия на пункт меню страница прокручивалась до якоря и меню закрывалось?
Привет всем, у меня есть html код страницы со вставками javascript кода. Имеется два javascripta, один отвечает за прокрутку страницы к...


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru