Выделить активный пункт меню, не затрагивая другие

Question

помогите пожалуйста найти ошибку в скрипте для добавления класса active ссылке на которой пользователь находится. Либо использовать другой скрипт Спасибо за помощь

try {
  var el = document.querySelectorAll('.right1 a.button8');
  var url = document.location.href;
  for (var i = 0; i < el.length; i++) {
    if (url == el[i].href) {
      el[i].className += ' :active';
    };
  };
} catch (e) {}

a.button8 {
  color: #0a684f;
}

a.button8:hover {
  color: #000000;
}

a.button8:active {
  color: #ef920d;
}

<div class="right1">
  <a href="#" class="button8">
    <div class="icontext">Left</div>
  </a>
</div>

<div class="right1">
  <a href="/2" class="button8">
    <div class="icontext">Center</div>
  </a>
</div>

<div class="right1">
  <a href="/3" class="button8">
    <div class="icontext">Right</div>
  </a>
</div>

Answer 1

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

var url = "/2";
var el = document.querySelectorAll('.right1 a.button8[href="'+url+'"]');
if(el.length > 0){
  el.forEach(function(item,key){
    item.classList.add("active");
  });
}

a.button8 {
  color: #0a684f;
}

a.button8:hover {
  color: #000000;
}

a.button8.active {
  color: #ef920d;
}

<div class="right1">
  <a href="#" class="button8">
    <div class="icontext">Left</div>
  </a>
</div>

<div class="right1">
  <a href="/2" class="button8">
    <div class="icontext">Center</div>
  </a>
</div>

<div class="right1">
  <a href="/3" class="button8">
    <div class="icontext">Right</div>
  </a>
</div>

БЛОГ НА HUSL

Выделить активный пункт меню, не затрагивая другие

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