Javascript and Jquery is used to make this types of concept simple manner. Just it set the css active class on click and remove the class when click the other link. This type of small concept is used to for scrolling websites. This is simple but i hope it is useful some certain cases in website.
Set and Remove the active class using jquery:
<head>
<title>set active class for links on click change the active class</title>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.7.1.js”></script>
<style>
.nav { color: green; }
.selected { color: red; }
.san ul li{
float:left;
margin-right: 25px;
}
</style>
</head>
<body>
<div class=”san”>
<ul id=”navlist”>
<li><a class=”nav” href=””>Home</a></li>
<li><a class=”nav” href=””>About Us</a></li>
<li><a class=”nav” href=””>Services</a></li>
<li><a class=”nav” href=””>Contact</a></li>
</ul>
</div>
<script>
$(‘#navlist a’).click(function(e) {
e.preventDefault(); //prevent the link from being followed
$(‘#navlist a’).removeClass(‘selected’);
$(this).addClass(‘selected’);
});
</script>
</body>
</html>
