导航栏跳转的高亮问题？(所有的页面都是公用的一个头部)

Question

导航栏的每一项都是a标签，点击每个a标签，对应的a都高亮，其他的正常，这个已经实现了，

问题是我点击导航栏中的a标签进入那个页面后，在点击这个页面里的a标签，然后【首页】被选中（我给首页默认加了高亮的类）

这个是【免费发布】页面，比如说我点击【免费发布】中的【我的收藏】，也是个a标签，跳转到【我的收藏】页面，问题就来了，看下图：

【首页】被选中了，正确的应该还是【免费发布】被选中
我的代码是这样写的：

 <script>
        var urlStr = window.location.href;
        $('.topnav li a').each(function () {
            var href = $(this).attr('href');
            var pos = urlStr.indexOf(href);
            if(pos>-1){
                $(this).addClass('colorBlue').parent('li').siblings('li').children('a').removeClass('colorBlue');
            }
        })

    </script>

要怎么实现才能点击【我的收藏】显示二级内容时，高亮的是父级的【免费发布】呢

Answer 1

首先debugger一下，看看 判断条件 pos>-1 是否走进来了。

内部的实现逻辑应该是：
先遍历你这儿所有的li，找到里面的a，去掉colorBlue。然后，把当前选中的a点亮。

建议不要这样写这么长的链式，容易把自己搞晕了。按照思路分两步写试试。

Answer 2

我想可以试试本地存储Web Storage

Answer 3

你这个问题解决了吗可以请教一下吗