Javascript I'；我试图在<；上设置类名；a>；标签。问题是当我点击链接时，页面刷新，类被删除

我有下面的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>

我的问题是，当我点击链接时，javascript函数被执行，类被应用。然后，页面刷新，由于类是动态添加的，因此在重新加载页面后，先前添加的类

class='active'

将被删除

刷新后如何设置类

---

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

要使用onclick处理锚定标记，您需要在单击时停止标记的默认操作，因为默认锚定标记导航到链接中的URL。 你可以写

function addActiveClass(e) {
    e.preventDefault();
    let el = document.getElementById(e.target.id);
    el.classList.add("active");
    el.parentElement.classList.add("active");
}

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

---

当你点击一个链接时，它会导航到链接中的URL。为什么你要获取元素的ID，然后按ID查找？只要做

var el=element似乎希望突出显示活动链接。因此，最好在页面加载时查看位置，然后突出显示与“window.location”具有相同href的链接。看起来preventDefault（）并没有阻止默认操作，因为它仍然可以导航到页面。
$(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");
}
});