[英]How can you keep an animation from a navbar-element on the last keyframe while on the current page?
I have a custom animation that when you hover a link a line flows from left to right (See example: https://jsfiddle.net/mxfiddle/fubLo45j/2/ ).我有一个自定义 animation ,当您使用 hover 时,一条链接从左到右流动(参见示例: https://jsfiddle45j/2/ )
I want the line to stay for the current page I am on.我希望这条线停留在我所在的当前页面上。
I am totally new to web development in general so any help would be much appreciated.一般来说,我对 web 开发完全陌生,因此我们将不胜感激。
Thanks in advance.提前致谢。
My code for adding an active class:我添加活动 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";
});
}
Add this to your pages:将此添加到您的页面:
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.
})
};
You need ether something like this or saving clicked item in local storage and read it on other page...您需要类似这样的以太或将单击的项目保存在本地存储中并在其他页面上阅读...
And I hope you do understand you can simply remove active class from home and put on a current link in HTML depending on page you are on...我希望你明白你可以简单地从家里删除活动的 class 并根据你所在的页面在 HTML 中放置一个当前链接......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.