javascript - 不使用 jQuery 突出显示事件 anchor 链接

Question

我正在构建一个只有一个页面的网站，但有不同的部分，例如主页、关于、联系方式等。我使用 anchor 标记滚动浏览页面的不同部分。我在页面顶部有一个固定的导航菜单，我想在导航链接中指出当前哪个部分处于事件状态。

我现在正在学习 JavaScript，所以我不知道该怎么做。我还想避免使用 jQuery。

Answer 1

我会使用hashchange event为了这。每当它触发时，通过添加/删除类来更新您的导航。在下面的示例中，该类称为“active”。

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>