Выделите активную ссылку привязки без использования jQuery

Question

Я создаю веб-сайт, который имеет только одну страницу, но с разными разделами, например, «Главная», «О нас», «Контакты» и т. Д. c. Я использую теги привязки для прокрутки различных разделов страницы. У меня есть фиксированное меню навигации вверху страницы, и я хотел бы указать В ссылках навигации, какой раздел активен в данный момент.

Я изучаю JavaScript в данный момент, поэтому я не уверен, как это сделать. Я также хочу избегать использования jQuery.

Answer 1

Я бы использовал для этого событие hashchange . Каждый раз, когда он срабатывает, обновите вашу навигацию, добавив / удалив класс. В следующем примере класс называется «активным».

window.addEventListener("hashchange", updateActiveNavigationEntry);

function updateActiveNavigationEntry () {
  // query currently active item
  const currentActiveItem = document.querySelector('#navigation a.active');
  // remove active class
  if (currentActiveItem) currentActiveItem.classList.remove("active");
  // query new active item
  const newActiveItem = document.querySelector('#navigation a[href="'+ window.location.hash +'"]');
  // add active class to new entry
  if (newActiveItem) newActiveItem.classList.add("active");
}

.active {
  background: red;
}

<div id="navigation">
  <a href="#section01">section01</a>
  <a href="#section02">section02</a>
  <a href="#section03">section03</a>
</div>