@enerjze

Как повесить класс active на текущее меню с анкором?

Проблема следующая, пытаюсь повесить через скрипт класс active на активный пункт i в main_nav
$(function () {
    var location = window.location.href;
    var cur_url = '/' + location.split('/').pop();
 
    $('.main_nav').each(function () {
        var link = $(this).find('a').attr('href');
 
        if (cur_url == link)
        {
            $(this).addClass('active');
        }
    });
});

Но ничего не происходит, ошибок в консоли тоже нет, не понимаю, что не так.
Вот код меню, если надо могу css скинуть. Если прописать <li class="active"> то цвет меняется, так что с css вроде все нормально.
<nav class="main_nav">
							<ul class="d-flex flex-row align-items-center justify-content-start">
								<li><a href="#about">О клубе</a></li>
								<li><a href="#clubcard">Клубные карты</a></li>
							    <li><a href="#advantages">Преимущества</a></li>
								<li><a href="#gallery">Галерея</a></li>
								<li><a href="services.html">Фитнес программы</a></li>
								<li><a href="team.html">Команда</a></li>
								<li><a href="#contacts">Контакты</a></li>
							</ul>
							
						</nav>
  • Вопрос задан
  • 343 просмотра
Пригласить эксперта
Ответы на вопрос 2
FeST1VaL
@FeST1VaL
Тихий
Как вариант: https://jsfiddle.net/fest1val/xojpyq6e/

$(function () {
	var hash = location.hash; // #about
	$('.main_nav').find('a[href="'+hash+'"]').addClass('active');
});


А если на li, то:

$(function () {
	var hash = location.hash; // #about
	$('.main_nav').find('a[href="'+hash+'"]').parent().addClass('active');
});


P.S: не тестировал, на скорую руку написал
Ответ написан
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Так вы циклом не там бежите

Поменяйте на
$('a', '.main_nav').each

А внутри
var link = $(this).attr('href');

Да, при таком подходе класс придётся вешать на А. Вам принципиально нужно чтобы было на Ли? Тогда потребуется небольшая переделка.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы