Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   ПРОШУ ПОМОГИТЕ,. Как выделить активный пункт меню? (https://javascript.ru/forum/dom-window/50622-proshu-pomogite-kak-vydelit-aktivnyjj-punkt-menyu.html)

Georka 04.10.2014 19:35

ПРОШУ ПОМОГИТЕ,. Как выделить активный пункт меню?
 
Ребят, как приписать дополнительный класс к <li> ???

Вот код:
<nav role="navigation" id="main-nav">
<ul id="menu-main-menu" class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="/"><i class="fa fa-home hidden-xs"></i><span class="visible-xs-inline">Главная</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="about.html">О нас</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="works.html">Услуги</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="gallery.html">Галерея</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="price.html">Прайс</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="contacts.html">Контакты</a></li>
</ul>
</nav>


Нужно чтобы у активного класса, после:
menu-item menu-item-type-post_type menu-item-object-page


Было:
current-menu-item page_item current_page_item


Вот так:
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item current_page_item">Ссылка</li>

Safort 04.10.2014 19:40

Ищи в поиске по словам classList.add или в доках jQuery метод addClass.

Georka 04.10.2014 20:03

Цитата:

Сообщение от Safort (Сообщение 333445)
Ищи в поиске по словам classList.add или в доках jQuery метод addClass.

Блин я не спец. Пожалуйста можете помочь а?

kostyanet 04.10.2014 20:35

Как это не спец - а такое количество шнурков кто завязал?

В качестве хорошего начала вопрос: по каким критериям определяется активный пункт меню и тебю?

Например мы на странице абоут <a href="about.html">О нас</a></li> - надо подсветить? Значит надо взять из урла адрес, или у вас лично есть другие источники?

kostyanet 04.10.2014 21:00

Походу ему надо, две темы уже, во избежание суицЫда покажу принцип:

var menu_a = document.getElementById('menu-main-menu').getElementsByTagName('a'); // все линки

for(var i=0;i<menu_a.length;i++) {
 if(menu_a[i].href=location.pathname) {
   menu_a[i].classList.add('тут перечислить тряхомудию');
   break;
 }
}


По чертежу должно работать, на jQuery скорее всего одна строчка, я не знаю какая.

ЗЫ Запускать после загрузки объекта документ.

kostyanet 04.10.2014 21:08

А, блин, не menu_a[i].classList, а блин

menu_a[i]parentNode.classList.add(тут шнурки);

По идее парент у линка - лист.

Дело в том что нормальные пацаны не разукрашивают сами листы - они идут контейнерами, разукрашиваются сами линки <a>. Тогда не надо скакать туда-сюда и главное что можно весь список сразу сделать каким хочешь цветом или там градиентом залить. Но это в нормальной каскадной технологии, то есть в CSS, в гамнямбе типа LESS'а - вот так, через ж.


Часовой пояс GMT +3, время: 04:43.