active class navigation based on url

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="container">
      <navv class="navecation">
       <ul id="navi">
    <li><a class=" active"href="#" target="blank">About </a></li>
    <li><a  href="https://codepen.io/arjunamgain/pen/lGALt" target="blank">Contact  </a></li>
         <li><a  href="https://codepen.io/arjunamgain/pen/lGALt" target="blank">Services</a></li>
    <li><a  href="https://codepen.io/arjunamgain/pen/lGALt" target="blank">Contact Us</a></li>          
    <li><a  href="http://www.mywebtricks.com/2014/03/add-active-class-to-navigation-menu.html">Read Our Blog</a></li>
  </ul>
    </navv>
  </div>

CSS

body{
  font-sze:14px;
}

.container{
 max-width:960px;
  margin:0 auto;
}
navv ul li{
  list-style:none;
  float:left;
  padding-right:20px;
}
navv 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");
});
});