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

Question

[enerjze]

Проблема следующая, пытаюсь повесить через скрипт класс 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>

Answer 1

[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: не тестировал, на скорую руку написал

Comments

[enerjze]

Не работает, я не понимаю почему.
Получается когда я добавляю код, в котором выделяется #about то класс добавляется, а когда ставлю location.hash то ничего не работает, как такое может быть?
В любом случае спасибо вам. Я заметил, что у меня в адресной строке не добавляется к ссылке хэштэг (#) т.е ссылка остается не изменной, но анкор работает, может в этом дело?
Upd
Все разобрался, спасибо вам за помощь, решил вот так.

var navLink = $('.main_nav a').on('click', function(e) {
    //e.preventDefault();
    navLink.not(this).removeClass('active');
    $(this).addClass('active');
});

[FeST1VaL]

enerjze, ну конечно как вариант, в моем варианте конечно якорь должен добавляться в конец строки, я таким образом его и забираю через location.hash. У вас скорее всего есть какой то плагин для имитирования якоря... так предполагаю. Ну короче говоря справились и славненько)

Answer 2

[Виталий Киренков]

Так вы циклом не там бежите

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

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

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

Comments

[enerjze]

$(function () {
    var location = window.location.href;
    var cur_url = '/' + location.split('/').pop();
 
    $('a', '.main_nav').each(function () {
		var link = $(this).attr('href');
 
        if (cur_url == link)
        {
            $(this).addClass('active');
        }
    });
});

Сделал так но тоже не работает(
Получается да, мне нужно на li повесить active

[Виталий Киренков]

enerjze, я там дописал только что. При таком подходе у вас класс вешается на А

[enerjze]

Виталий Киренков, ну грубо говоря написать в css

.main_nav a.active,{
	color: #56B62D;
}

Если так, то тоже не помогает(

[Виталий Киренков]

enerjze, а зедебажить чему равно cur_url и link пробовали? Какие там значения в каждой итерации?
А что в консоли? А в дебагбаре? За весь весь код что ли писать?

Вопрос был - непонятно, что происходит. Ответ - циклом не там проходитесь!

[enerjze]

Виталий Киренков, Я не силен в jquery, иначе не писал бы сюда. Никто вас не просит ничего писать, спасибо за помощь, удачи.