在当前页面上，如何从最后一个关键帧的导航栏元素中保留 animation？

Question

我有一个自定义 animation ，当您使用 hover 时，一条链接从左到右流动（参见示例： https://jsfiddle45j/2/ ）

我希望这条线停留在我所在的当前页面上。

一般来说，我对 web 开发完全陌生，因此我们将不胜感激。

提前致谢。

我添加活动 class 的代码：

// Get the container element
var navbarContainer = document.getElementById("navbar");

// Get all navbar elements with class="navElement" inside the container
var navElement = navbarContainer.getElementsByClassName("navElement");

// Loop through the navbar elements and add the active class to the current/clicked button
for (var i = 0; i < navElement.length; i++) {
  navElement[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Answer 1

将此添加到您的页面：

document.body.onload = function() {
// on page load
  document.querySelectorAll("#navbar a").forEach(a => {
//catch all links in navbar
    a.href === location.pathname ? a.classList.add("active") : a.classList.remove("active")
// if navbar link is the same as current loacation pathname add active class, if not remove it.
  })
};

您需要类似这样的以太或将单击的项目保存在本地存储中并在其他页面上阅读...

我希望你明白你可以简单地从家里删除活动的 class 并根据你所在的页面在 HTML 中放置一个当前链接......