active class of nav

by Gulam Jilani

HTML

<body>
  <div class="container">
    <nav class="navecation">
       <ul >
    <li><a class=" active"herf="#">About </a></li>
    <li><a class="menu" href="#">Contact  </a></li>
         <li><a class="menu" href="#">Services</a></li>
    <li><a class="menu" href="#">Contact Us</a></li>          
    <li><a class="menu" href="http://www.mywebtricks.com/2014/03/add-active-class-to-navigation-menu.html">Read Our Blog</a></li>
  </ul>
    </nav>
  </div>
  </body>

CSS

body{
  font-sze:14px;
}

.container{
 max-width:960px;
  margin:0 auto;
}
nav ul li{
  list-style:none;
  float:left;
  padding-right:20px;
}
nav ul li a{
  text-decoration:none;
  color:#222;
  background-color:#ccc;
  padding:4px 5px;
}
.active{
  background-color:#d90000;
  color:#fff;

}

JavaScript

$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});