Как с помощью js присвоить класс активной ссылке меню?

Question

[Иван Малышев]

Суть вот в чем. Делаю сайт на WP, возникла необходимость сделать статичное меню, но при переходе по пунктам меню, активный пункт должен подсвечиваться.
На одном из проектов я так уже делал с помощью такого скрипта:

<script type="text/javascript">
$(function () { // Когда страница загрузится
$('.nav a').each(function () { // получаем все нужные нам ссылки
var location = window.location.href; // получаем адрес страницы
var link = this.href; // получаем адрес ссылки
if(location == link) { // при совпадении адреса ссылки и адреса окна
$(this).parent().addClass('active'); //добавляем класс
}
});
});
</script>

В таком случае тегу li активной ссылки присваивался класс active. Вот собственно само меню:

<ul class="nav navbar-nav">
 <li><a href="<?php bloginfo('url'); ?>/o-sayte">О сайте</a></li>
 <li><a href="<?php bloginfo('url'); ?>/reklama">Рекалама</a></li>
 <li><a href="<?php bloginfo('url'); ?>/vakansii">Вакансии</a></li>
 <li><a href="<?php bloginfo('url'); ?>/kontakty">Контакты</a></li>
 </ul>

Проверяю alert(location); - выводится полная ссылка, как и положено, проверяю alert(link); - ничего не выводится.
Что я делаю не так?

Answer 1

[Stalker_darkway]

$('.navbar-nav li').click(function(){
$('.navbar-nav li').removeClass('active');
$(this).addClass('active');
});

Comments

[Иван Малышев]

Увы :(

[Stalker_darkway]

Ну как вариант сделайте ссылку блочной, растяните по всему li и опять же эту конструкцию только уже для ссылки. Я делал на WP такое меню, все работало.

[Владимир Куликов]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
 <script type="text/javascript">
$('.languages_switcher li').click(function(){
$('.languages_switcher li').removeClass('active');
$(this).addClass('active');
});
</script>

Все работает, спасибо.

[Stalker_darkway]

Валерий Иванов, не за что)

Answer 2

[Денис Инешин]

Вы всё делаете не так.
Активный пункт меню должен настраиваться на стороне сервера, когда вы своим PHP собираете итоговую страницу. Я уверен что в вордпрессе такая функциональность есть из коробки и нужно просто немного погуглить.

Comments

[Иван Малышев]

Все верно, но в моем случае меню статичное, так как имеет некоторые доработки, которые в стандартном меню не получается вывести

[Денис Инешин]

Иван Малышев: то что меню не стандартное всё еще не повод переносить эту функциональность в JS.

[Иван Малышев]

Денис Инешин: другого варианта реализации не придумал

[Денис Инешин]

Иван Малышев: капайте в строну php, это нужно делать там. Железно.

[Дмитрий Королёв]

Иван Малышев: в любом случае управление меню должно быть из админки. В вашем случае - когда меню одноуровневое - нет вообще никаких проблем сделать абсолютно любой код на выходе. Используйте wp_get_nav_menu_items для получения элементов меню и оформляйте их как душе угодно. Посмотрите примеры в статье на кодексе.