How to add selected or active class to menu ??

If you want to add class selected or active to your menu just add the script in your project


Add jquery library using following url

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


Html:

<ul id="main-ul">
   <li><a href="#">About MHG</a></li>
    <li><a href="#">Workout Programs</a></li>
    <li><a href="#">Fitness Tips</a></li>
    <li><a href="#">Contact Us</a></li>        
    <li><a href="#">Read Our Blog</a></li>
</ul


CSS:

li{list-style:none;}
.selected{background:red;}
.selected a{color:#fff;}


Script:

$(document).ready(function(){
    $("#main-ul li").click(function(){
        $('li').removeClass("selected");
        $(this).addClass("selected");
    })
})


For live demo click Here