jquery - Navigation bar active class not working correctly when route to another link -

how set active class when link clicked? link1 not active class when clicked. codes given below: html part:

<div class="navbar-collapse collapse">     <ul class="nav navbar-nav" id="nav">         <li id="home" class="active"><a href="/home/index">home</a></li>         <li id="skill"><a href="/home/gotolink1">link1</a></li>    </ul> </div> 

i have used jquery:

<script> $(document).ready(function () {     $('#nav li a').on('click', function () {         $(this).parent().parent().find('.active').removeclass('active');         $(this).parent().addclass('active');     }); }); </script> 

when clicked link, active property not works correctly.

when redirect new page dynamic state not preserved. current location , iterate through nav menus. link matched current location make active below. hope helps.

<script>     $(document).ready(function () {         var location = window.location.href;         $('#nav li a').each(function(){             if(location.indexof(this.href)>-1) {                $(this).parent().addclass('active');             }         });     }); </script>