如何解决将.active类设置为动态创建的链接JS
几周前,我建立了一个导航栏,只是意识到我没有在其上设置.active类。现在,我在JS中动态构建了导航栏和链接,现在想给哪个活跃的CSS。
这是我在JS中构建导航栏的方式:
let womensNav = document.createElement("ul");
womensNav.classList.add("womensNav");
const el1 = document.createElement("li");
el1.innerHTML = "<a>Jeans</a>";
el1.addEventListener("click",(e) => {
document.location.href =
"https://www.martadolska.com/product-category/women/womens-jeans";
});
womensNav.appendChild(el1);
document.querySelector(".ast-woocommerce-container").appendChild(womensNav);
我有多个链接,但出于这个目的,我不需要全部显示。因此,现在的目标是构建一个通用函数,为导航栏中的活动元素提供相应的类。
document.querySelectorAll("#womensNav li").forEach(function (ele) {
ele.addEventListener("click",function (e) {
e.preventDefault();
document
.querySelectorAll("#womensNav li a.active")
.forEach((ele) => ele.classList.remove("active"));
ele.parentNode.classList.toggle("active");
});
});
这就是我的CSS的样子:
.womensNav li a:hover {
color: var(--main-text-color);
text-decoration: line-through darkred solid;
}
.womensNav li a::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 7px;
left: 0;
background-color: #b22222;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.womensNav li a:hover::before {
visibility: visible;
transform: scaleX(1);
}
.womensNav li a:active::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 10px;
left: 0;
background-color: #b22222;
}
// up until this point everything works
.active {
text-decoration: line-through darkred solid;
}
我正在猜测JS代码的第二个片段中缺少/不完全正确,因为当我的链接处于活动状态时什么也没有发生。我得到了想要的动画,但是一旦将用户重定向到该特定链接,它就会消失,因此您将不知道自己在哪个子页面上。
解决方法
这是错误的
ele.parentNode.classList.toggle("active");
“ ele”是<li>
,您要通过parentNode将“ active”类添加到<ul>
,最好使用单击中的“ e”事件并使用e。目标,然后尝试在<a>
上设置活动类,或使用childNode / children获取您的<a>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。