Ul and li Menu Active class on java script

/********** Html Start ***************/

<ul id="nav1">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Services </a></li>
<li><a href="#">Contact Us</a></li>
</ul>
/********** Html End ***************/

/********** Css Start  ***************/
<style>
.navbar-default .navbar-nav > li.active-nav > a {
    color: #fff !important;
    background: #123b67 !important;
    padding: 6px 10px;
}
</style>

/********** Css End ***************/

/********** Java Script Start ***************/

$(document).ready(function() {
    $('ul#nav1 li a').each(function () {
        if ($($(this))[0].href == String(window.location))
            $(this).parent().addClass('active-nav');
    });
     
});

/********** Java Script End ***************/