I'm trying to set a class name on <a> tag. the problem is when I click on the link the page refreshes and the class is removed

Question

I have the following HTML piece of code

<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>

what I want is when I click on any of the <a> link, the javascript function addActiveClass(this) is called and add a class class='active' on the clicked <a> tag.

The javascript code is

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

My problem is that when I click on the link the javascript function is executed and the class gets applied. Then after that, the page refreshes and since the class was added dynamically, after re-loading the page, the previously added class class='active' is removed.

How should I make the class get set after a refresh?

These lists are on the static page that loads child pages which changes.

Answer 1

Thanks heleg for your suggestion it actually worked,

I did the following

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

Answer 2

For onclick to work on an anchor tag, you need to stop the default action of an tag on clicking as by default anchor tags navigate to the URL in the link. You can instead write,

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