用js做的导航栏选中状态 为什么跳转页面之后不起作用 该怎么办

Question

js是写在一个文件内的， 相应网页都引用了。 在本页面内是可以实现的，跳转页面就不行了， 比如《产品介绍》就不起作用，active在《产品介绍》闪了一下，跳转后还是在《首页》这个li上

JS代码如下：

var $nava=$(".nav ul");
    $nava.children("li").click(
        function(){

               $(this).children("a").addClass("active");
              $(this).siblings().children("a").removeClass("active")
        });

HTML代码如下：

<div class="nav">
   <nav>
       <ul>
           <li><a href="index.html" class="home active">首页</a></li>
           <li><a href="index.html#profile" class="profile">公司简介</a></li>
           <li><a href="cheng.html">产品介绍</a></li>
       </ul>
   </nav>
</div>