Navigation stays highlighted after clicking on it - html

Question

Hi i just wanted some help trying to animate my navigation bar. I want the nav link to still be highlight after I have clicked on the page. So for example if I pressed a "home" button while on the home page the home button would be highlighted to just to show that your definitely on this page. Would use :target or ::active?
<div id="header-content">
<div class="hire"><h3>For Hire</h3></div>
<h1>Black Cab Tours</h1>
<nav class="cl-effect-8">
<ul>
<li><a onclick="tours.html" href="#tab1">Tours</a></li>
<li>About</li>
<li>Contact</li>
<li>Review</li>
</ul>
</nav>
</div>

Answer 1

create a css class like
.active {
background: #c2c2c2;
}
when u click on a HOME page link add this class to that li tag through java script here is the code
$('li').click(function(){
$(this).removeClass('active');
$(this).addClass('active');
});
or you can use gt(), lt() selector to remove active class from else li tags

Answer 2

Your best bet is to use Javascript (e.g. jQuery) to assist you, in native CSS :active will only style the current interaction state as it occurs, :target may be unreliable if you rely on routing, and the final option :focus will fail when clicking elsewhere.
By using jQuery you can more tightly maintain control over the application/removal of a selected state, e.g:
$('#header-content li').on('click', function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
This isolates the relevant elements, adds the class selected when you click one, and removes it from its siblings.