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

Question

[Rokis]

Здравствуйте!

Знаю, что информации на эту тему полно, но у меня ничего не получается.

Смысл в следующем:

Есть URL: www.mysite.ru/category1/post1

И есть структура меню:

<div class="header">
<ul>
   <li class="class"><a itemprop="url" href="http://mysite.ru/category1">категория 1</a</li>
   <li class="class"><a itemprop="url" href="http://mysite.ru/category2">категория 2</a></li>
 </ul>
</div>

Как сделать так чтобы добавлялся любой класс (например, active) к li элементу при условии, что пост находиться в данной категории? Перепробовал множество решений и ни одно не подошло.

Подскажите пожалуйста!

Answer 1

[Maxim Nepritimov]

Предлагаю в каждый li-элемент добавить data-атрибут data-category,
в который помещать соответствующую пункту категорию - category1, category2, ...:

<ul>
   <li class="class" data-category="category1"><a itemprop="url">категория 1</a</li>
   <li class="class" data-category="category2"><a itemprop="url">категория 2</a></li>
 </ul>

Далее, находим пункты меню:
var menuLinks = $('.class');
Чтобы из url'а www.mysite.ru/category1/post1 взять название категории, можно:

var activeCategory = window.location.pathname.split('/')[1];

Далее, чтобы выделить необходимый пункт, можно:

menuLinks.removeClass('active'); // чтобы сбросить выделения у всех пунктов
menuLinks.filter('[data-category="' + activeCategory + '"]').addClass('active');

Comments

[Rokis]

Вы гений! Спасибо большое!