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

Question

 .px-lg-4{
    color: #fafaff;
  }
  .px-lg-4:hover{
    color: rgb(125, 218, 32);
    transition: 0.5s;
  }

  <div class="collapse navbar-collapse" id="navbar4">
  <!-- <ul class="navbar-nav mr-auto pl-lg-4"> -->
    
   <a class="nav-link px-lg-4" id="button" href="/dashboard/news/" style="font-family: 'Montserrat', sans-serif; font-size: 18px;">Новости</a> 
   <a class="nav-link px-lg-4" href="/dashboard/sell/" style="font-family: 'Montserrat', sans-serif; font-size: 18px;">Продажа</a>
   <!-- <a class="nav-link px-lg-4" href="/dashboard/buy/" style="font-family: 'Montserrat', sans-serif; font-size: 18px;">Покупка</a>  -->
   <a class="nav-link px-lg-4" href="/dashboard/deposits/" style="font-family: 'Montserrat', sans-serif; font-size: 18px;">Пополнение</a>
   <a class="nav-link px-lg-4" href="/dashboard/wallets/" style="font-family: 'Montserrat', sans-serif; font-size: 18px;">Кошельки</a>
   <a class="nav-link px-lg-4" href="/dashboard/statistics/" style="font-family: 'Montserrat', sans-serif; font-size: 18px;">Статистика</a>
   <a class="nav-link px-lg-4" href="/dashboard/settings/" style="font-family: 'Montserrat', sans-serif; font-size: 18px;">Настройки</a>
   <a class="nav-link px-lg-4" href="/dashboard/faq/" style="font-family: 'Montserrat', sans-serif; font-size: 18px; ">FAQ</a>

  </div>
  </div>
  </nav>
<br><br><br>

Answer 1

// берём все ссылки с меню (#navbar4)
let links = document.querySelectorAll('#navbar4 a');
links.forEach(link => {
  // сравниваем href атрибут ссылки с адресной строкой
  if ( link.href === window.location.href ) {
    // добавляем ссылке класс active - в css любые стили дописать можно
    link.classList.add('active');
  }
});

БЛОГ НА HUSL

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

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