javascript - Common header with active class change -

hi have set of webpages websites tried create common header 3 pages , added click function when click on link takes me page active class function not working. me this. in advance.

here common header.php

<ul id="navigation" class="nav navbar-nav" style="position:relative;">     <li class="active op"><a href="/link1">link1</a></li>     <li><a href="/link2">link2</a></li>     <li><a href="/link3">link3</a></li>     <li><a href="link4">link4</a></li> </ul> 

here jquery code have added in header.php file

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

try code had same problem once. work fine

    $(function() {      var pgurl = window.location.href.substr(window.location.href .lastindexof("/")+1);      pgurl = "/vv/"+pgurl;      $("#navigation li").each(function(){          var link = $("a",this).attr('href');              if(link == pgurl){                               $(this).addclass("active op");           }      }) }); 

don't forget add libraries before it..