Jquery active highlight menu 3

example : https://dl.dropboxusercontent.com/u/155522840/activemenu/index.html
css
============================
.mainmenu_area{margin:50px auto;width:500px;}
ul{margin:0;padding:0;list-style:none;}
ul li{float:left; background:#2181C2; margin-right:1px; }
ul li a{display:block;padding:5px 15px;font-size:15px;color:#fff;}
ul li a:hover{text-decoration:none;color:#000;}
ul li.active{ background:#6CBD3E;}
ul li.active a{ color:#fff; cursor:default;}

html
============================
<div class="mainmenu_area">
    <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="product.html">Product</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>




jquery
============================
$(document).ready(function(){
        var str=location.href.toLowerCase();

        $(".mainmenu_area ul li a").each(function() {
                if (str.indexOf(this.href.toLowerCase()) > -1) {
                         $("ul li.active").removeClass("active");
                        $(this).parent().addClass("active");
                        }

        });
})