如何使用 JavaScript 显示活动导航

在网页应用程序中，导航栏是必不可少的，因为它能够帮助用户在页面间快速切换和导航。本文将介绍如何使用 JavaScript 来显示活动导航，让用户能够清晰地知道他们目前所在页面。

实现思路

我们可以通过获取当前页面的 URL 然后将其与导航栏里所有的链接进行匹配，找到匹配的链接并将其样式设置为活动状态。

实现步骤

1. 获取当前页面的 URL

我们可以使用 window.location.href 来获取当前页面的 URL。

let currentUrl = window.location.href;

2. 获取所有链接并进行匹配

我们可以使用 querySelectorAll 方法来获取导航栏里所有链接，然后通过循环遍历所有链接并将其 href 属性和当前 URL 进行匹配。匹配成功后，我们将该链接的样式设置为活动状态。

let navLinks = document.querySelectorAll('nav a');
for (let link of navLinks) {
  if (link.href === currentUrl) {
    link.classList.add('active');
    break;
  }
}

3. 添加样式

我们可以通过 CSS 来为活动的导航链接添加样式，让它看起来更加不同于其他链接。

nav a.active {
  font-weight: bold;
  text-decoration: none;
}

完整代码

let currentUrl = window.location.href;
let navLinks = document.querySelectorAll('nav a');
for (let link of navLinks) {
  if (link.href === currentUrl) {
    link.classList.add('active');
    break;
  }
}

nav a.active {
  font-weight: bold;
  text-decoration: none;
}

总结

使用 JavaScript 来显示活动导航是一种简单而有效的方法。我们可以将其融入到网页应用中，让用户在导航栏中更容易地找到自己所在的页面。