在不使用 jQuery 的情况下突出显示活动锚链接答案

【问题标题】：Highlight active anchor link without using jQuery在不使用 jQuery 的情况下突出显示活动锚链接
【发布时间】：2020-06-19 08:36:55
【问题描述】：

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

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

【问题讨论】：

这能回答你的问题吗stackoverflow.com/questions/487073/…

标签： javascript html css

【解决方案1】：

我会为此使用hashchange event。每当它触发时，通过添加/删除一个类来更新你的导航。在以下示例中，该类称为“活动”。

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>

【讨论】：