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

Question

Всем привет, хочу чтобы при переходе на страницу, ссылка в меню всегда имела свой класс. Пока что не получается. Понимаю, что я не могу сравнить глобальную и локальную переменную. Но может меня кто-то натолкнет на мысль, как правильно.

p.s. варианты с jquery не рассматриваю, потому что только учусь)

let b = window.location.href
let count = document.querySelector('.nav').getElementsByTagName('a').length

for (let i = 0; i < count; i++) {
    let c = document.querySelectorAll('.nav__link')[i].href
}

if (с == b) {
    document.querySelector('.nav__link').classList.add('nav__link_active')
} else {
    document.querySelector('.nav__link').classList.remove('nav__link_active')
}

html

<ul class="nav">
    <a class="nav__link" href="#">i>
        <li class="nav__item">Главная</li>
    </a>
    <a class="nav__link" href="#">
        <li class="nav__item">Личный кабинет</li>
    </a>
</ul>

Answer 1

let navs = document.querySelectorAll(".nav__link ");


navs.forEach((nav) => {
    if (nav.href == window.location.href) {
        nav.classList.add("active");
    }
})

Думаю логика понятна. Вам нужно получить все элементы Node и перебирая их циклом делать соответсвующую проверку

Answer 2

Первая проблема в том, что у вас одно из использований переменной c, судя по всему, было на кириллице. К тому же переменная, объявленная через let, видна только в цикле, в котором вы ее объявили. Поэтому выдавалась ошибка, что эта переменная не объявлена.

Вторая проблема в том, что проверка должна быть внутри цикла, поскольку по завершению цикла вы потеряете многократно вами перезаписанную переменную c, да и если бы ее значение осталось, то вы бы во внешнем условии сравнивали только с последним полученным элементом

Вот рабочий вариант на основе вашего кода (css добавил для наглядности):

var b = window.location.href
let count = document.querySelector('.nav').getElementsByTagName('a').length

for (let i = 0; i < count; i++) {
    var c = document.querySelectorAll('.nav__link')[i]
    var d = c.href
    if (d == b) {
      c.classList.add('nav__link_active')
    } else {
      c.classList.remove('nav__link_active')
    }
}

.nav__link_active {
  color:red;
}

<ul class="nav">
    <a class="nav__link" href="/js">
        <li class="nav__item">Главная</li>
    </a>
    <a class="nav__link" href="/css">
        <li class="nav__item">Личный кабинет</li>
    </a>
</ul>

Answer 3

Не выносите if из цикла. Вам нужно каждый элемент навигации проверить - делайте это непосредственно в цикле. Должно получится примерно так:

const currentLink = window.location.href;
const links = document.querySelectorAll('.nav__link');

for (let i = 0; i < links.length; i++) {
  if (links[i].href === currentLink) {
    links[i].classList.add('nav__link_active')
  } else {
    links[i].classList.remove('nav__link_active')
  }
}

Answer 4

let href  = window.location.pathname;
let links = document.querySelectorAll("a[href*='" + href + "']");

links.forEach(e => e.classList.add('active'));

Если есть параметры в адресной строке, то такой вариант отработает корректно, включая пути вида /page/index.html

БЛОГ НА HUSL

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

Ответы (4 шт):