我正在尝试在<a>标签上设置一个类名。问题是，当我单击链接时，页面会刷新，类也会被删除
我正在尝试在<a>标签上设置一个类名。问题是，当我单击链接时，页面会刷新，类也会被删除
提问于 2020-04-14 06:56:51
我有下面这段HTML代码
<li>
<a href="javascript:;"><i class="sidebar-item-icon ti-hummer"></i>
<span class="nav-label">Product Management</span><i class="fa fa-angle-left arrow"></i></a>
<ul class="nav-2-level collapse">
<li>
<a href="/admin/addProducts" id="addProductMenu" onclick="addActiveClass(this)" >Add Product</a>
</li>
<li>
<a href="/admin/allProducts" id="allProductsMenu" onclick="addActiveClass(this)">All Products</a>
</li>
<li>
<a href="/admin/recommendedProducts" id="recommendedMenu" onclick="addActiveClass(this)">Recommended</a>
</li>
<li>
<a href="/admin/featuredProducts" id="featuredMenu" onclick="addActiveClass(this)">Featured</a>
</li>
<li>
<a href="/admin/bestSellingProducts" id="bestSellingMenu" onclick="addActiveClass(this)">Best Selling</a>
</li>
<li>
<a href="/admin/popularIndustriesProducts" id="popularIndustriesMenu" onclick="addActiveClass(this)">Under popular industries</a>
</li>
</ul>
</li>我想要的是，当我单击任何<a>链接时，javascript函数addActiveClass(this)就会被调用，并在单击的<a>标记上添加一个类class='active'。
javascript代码是
function addActiveClass(element) {
var el = document.getElementById(element.id);
el.classList.add("active");
el.parentElement.classList.add("active");
}我的问题是，当我单击链接时，javascript函数会被执行，类也会被应用。然后，页面刷新，因为类是动态添加的，所以在重新加载页面后，先前添加的类class='active'将被删除。
如何在刷新后设置类？
这些列表位于加载更改的子页面的静态页面上。
Stack Overflow用户
发布于 2020-04-15 20:39:45
谢谢你的建议，它确实起作用了，
我做了以下工作
$(document).ready(function() {
var path = window.location.pathname.split("/").pop();
var parent = null;
var activeElement = null;
var target = null;
if (path == "") {
path = "home";
}
if (path == "home") {
target = $('nav div ul li a[href="/admin/' + path + '"]');
} else {
target = $('nav div ul li ul li a[href="/admin/' + path + '"]');
}
target.addClass("active");
if (path != "home") {
activeElement = document.getElementsByClassName("active");
parent = activeElement[0].parentElement;
parent = parent.parentElement;
parent.classList.add("in");
parent = parent.parentElement;
parent.classList.add("active");
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61198107
复制相关文章
相似问题
腾讯云开发者
