javascript - Tag <a> lose its background after page reloads -

i'm trying assign background elements javascript, tags keep background during page reloading, switching normal background. here 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 autor</a></li>     <li><a class="" href="user/login">manage</a></li> </ul> 

thanks

your javascript code altering page after has been loaded. when reload page, goes initial state.

what trying hardly achievable without server side code (unless building single page application don't think so). server needs know active page renders link having active class.

if can't or not want deal server solution, you'll have find out active page in javascript code. means you'll need detect , add class proper element. operation can take time (i.e while javascript file loads) , link might first appears without active state short period. anyway, here possible way detect active page:

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

note: not complete solution hint ;)