时间戳

首页 > 解决方案 > 如何在当前页面上保留最后一个关键帧上的导航栏元素的动画？

javascript - 如何在当前页面上保留最后一个关键帧上的导航栏元素的动画？

问题描述

我有一个自定义动画，当您将链接悬停时，一条线从左向右流动（参见示例：https ://jsfiddle.net/mxfiddle/fubLo45j/2/ ）。

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

一般来说，我对 Web 开发完全陌生，因此非常感谢任何帮助。

提前致谢。

我添加活动类的代码：

// 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";
  });
}

标签： javascripthtmlcss

解决方案

将此添加到您的页面：

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.
  })
};

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

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

推荐阅读