Jquery active highlight menu 2

css
====================================
.nav {background: none repeat scroll 0 0 #da5d00;
margin: 200px auto;
width: 270px;}
.nav ul {margin:0;padding:0;list-style:none;}
.nav ul li {float: left;
border-right: 1px solid#fff;}
.nav ul li:last-child {border-right: 0px solid#fff;}
.nav ul li a {color: #fff;
display: block;
font-size: 20px;
padding: 10px 15px;
text-decoration: none;}
.nav ul li a:hover {background:#333;}
.nav ul li .active {background:#1C6959;}

html
===========================================
<div class="nav">

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="active1.html">Contact</a></li>
        <li><a href="active2.html">About</a></li>

    </ul>

</div>

jquery
============================================
$(document).ready(function(){
    $(function() {
         var pgurl = window.location.href.substr(window.location.href
    .lastIndexOf("/")+1);
         $(".nav ul li a").each(function(){
              if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
              $(this).addClass("active");
         })
    });
});

source: http://andornagy.com/active-class-navigation-menu/