Tag <a> lose its background after page reloads

Question

i'm trying to assign a background to my elements with javascript, but the tags keep the background only during the page reloading, for then switching back to their normal background. Here is my code:

Javascript:

$(document).ready(function(){
    $(".container_menu ul li a").click(function() {
        $(this).addClass("active").siblings().removeClass("active");
    });
});

Css:

.container_menu ul li a.active{
    background-color: rgba(255, 255, 255, 0.156863);
}

Html:

<ul>
    <li><a class="" href="user">Home</a></li>
    <li><a class="" href="user/gallery">Gallery</a></li>
    <li><a class="" href="user/about">About the autor</a></li>
    <li><a class="" href="user/login">Manage</a></li>
</ul>

Thanks

Answer 1

The reason is that you are using .active which means that the background will only be applicable while it is active. https://jsfiddle.net/1p5zzwrf/1/

.container_menu ul li a.active{
    background-color: rgba(255, 255, 255, 0.156863);
}

.container_menu ul li a{
    background-color: rgba(255, 111, 255, 0.156863);
}

Answer 2

If you want to show the user where he's browsing at the moment you first have to set active class on the link.

So to do that:

index.html

<ul>
    <li><a class="active" href="user">Home</a></li>
    <li><a class="" href="user/gallery">Gallery</a></li>
    <li><a class="" href="user/about">About the autor</a></li>
    <li><a class="" href="user/login">Manage</a></li>
</ul>

gallery.html

<ul>
    <li><a class="" href="user">Home</a></li>
    <li><a class="active" href="user/gallery">Gallery</a></li>
    <li><a class="" href="user/about">About the autor</a></li>
    <li><a class="" href="user/login">Manage</a></li>
</ul>

And so on.

If you got a server scripting language that would make it easier for you.

Answer 3

Your javascript code is altering the page after it has been loaded. So when you reload the page, it goes back to its initial state.

What you are trying to do is hardly achievable without some server side code (unless you are building a single page application but I don't think so). Your server needs to know what is the active page so it renders it with your link having the active class.

If you can't or do not want to deal with the server solution, you'll have to find out what is the active page in your javascript code. It means that you'll need to detect it and then add the class to the proper element. This operation can take time (ie while the javascript file loads) and the link might first appears without its active state for a short period. Anyway, here is a possible way to detect the active page:

var link = document.getElementById('link-user-about');
if (/user\/about\/$/.test(window.location.href)) {
    link.className = 'active';
}

Note: this is not the complete solution but a good hint ;)