Как сделать динамическое выделение ссылки меню?

Question

[alex1nd]

Как на js сделать динамическое выделение ссылки меню на той странице на которой находится пользователь?

Answer 1

[Владлен Хеллсайт]

document.querySelectorAll('nav a').forEach((link) => {
    if (link.pathname === location.pathname) {
        link.classList.add('active');
    }
});

Comments

[alex1nd]

как то не работает

document.querySelectorAll('nav li').forEach((link) => {
if (link.pathname === location.pathname) {
link.classList.add('active');
}
});

zhalyuzi-rostov.ru/zhalyuzi-gorizontalnyie

[Владлен Хеллсайт]

alex1nd, ну так вы должны были адаптировать элементы для себя. В вашем случае это будет:

document.querySelectorAll('.nav a').forEach((link) => {
    if (link.pathname === location.pathname) {
        link.classList.add('active');
    }
});

Учтите, что вам нужно добавить CSS стили для класса .active в меню. Вот наглядный пример без классов:

document.querySelectorAll('.nav a').forEach((link) => {
    if (link.pathname === location.pathname) {
        link.style = 'color: red';
    }
});

[alex1nd]

Владлен Хеллсайт, не работает, у меня же структура как раз class active на LI цепляется, почему на а ?

[alex1nd]

Владлен Хеллсайт, там есть стиль на класе активе

[Владлен Хеллсайт]

alex1nd, в таком случае ищите по ссылке, а значения стилей ставьте для родителя:

document.querySelectorAll('.nav a').forEach((link) => {
    if (link.pathname === location.pathname) {
        link.parentElement.classList.add('active');
    }
});

[alex1nd]

заработало, спасибо, теперь ясно

Answer 2

[Ice]

window.location
можно определять url / pathname и подсвечивать нужные строки

лучше такие вещи делать во время выгрузки контента, добавлять к ссылкам текущее состояние, текущее местоположение.