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>
Comments
Post a Comment