javascript - 我正在尝试在 <a> 标记上设置类名。问题是当我单击链接时，页面刷新并且该类被删除

Question

我有以下 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)被调用并添加一个类class='active'点击<a>标签。

JavaScript代码是

function addActiveClass(element) {
    var el = document.getElementById(element.id);
    el.classList.add("active");
    el.parentElement.classList.add("active");
}

我的问题是，当我单击链接时，将执行 javascript 函数并应用该类。然后，页面刷新，由于类是动态添加的，重新加载页面后，之前添加的类class='active'已删除。

刷新后我应该如何设置类？

这些列表位于加载更改的子页面的静态页面上。

Answer 1

感谢heleg的建议，它确实有效，

我做了以下事情

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