I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a solution to maintain the active tab's background color even after reloading the page.
Please provide guidance.
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$( document ).ready( function(){
$('.nan_canada').on('click','.menuil',function () {
$(this).addClass('selected')
});
});
</script>
<div class="nan_canada">
<ul >
<li class="menuil" ><a href="a.php">Resume Template & LinkedIn Podcasts</a></li>
<li class="menuil"><a href="jas.php" >Job Postings </a></li>
<li class="menuil"><a href="a.php"> Search Firms</a></li>
<li class="menuil"><a href="aj.php" target="_blank"> nav</a></li>
<li class="menuil"><a href="books.php">Book List </a></li>
<li class="menuil"><a href="#"> Order Free Book </a></li>
<strong><font size="4" style="float:right; padding-right:10px;"><a href="at.php" style="color:#fff;">Log Out</a></font></strong> </ul>
</div>
<style type="text/css">
.menuil {
color:#000000;
}
.menuil #selected_step_box,
.QuickStartLong:hover {
background-color: #fff; !important
}
.selected {
background-color : #fff;
}
</style>