Highlight Current Link with CSS and jQuery

Sometimes it is very important to highlight current link because it shows which link is active in current state. There are many ways to solve this problem but we have very easy solution of this problem.

Suppose you have two links in your web page like below:

<span id="orderBy">
 <ul>
 <li><a href="#" class="sort">Low to High</a></li>
 <li><a href="#" class="sort">High to Low</a></li>
 </ul>
</span>

and you need to highlight current link. Just add below script to get rid from your problem.

<script type="text/javascript">
   $(window).load(function(){
   var main = main = $('#orderBy ul');
   $('.sort').click(function(event) { 
   main.children().removeClass(); 
   $(this).parent().addClass('active');
   });
   });
</script>

This script adds a class to current li element and remove from previous one.

Sample CSS for this example:

<style type="text/css">
  #orderBy ul li{list-style: none;float: left;margin: 5px}
  #orderBy a{text-decoration: none; }
  span#orderBy a:hover, span#orderBy li.active a{color:green;}
  span#orderBy a {color:blue;}
</style>

View Demo

Note → You need to include jQuery to your page. To include jQuery add below line between head tag-

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>