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

与笑颜开
  • 6

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

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

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

clipboard.png
【首页】被选中了,正确的应该还是【免费发布】被选中
我的代码是这样写的:

 <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>

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

回复
阅读 2.5k
3 个回答

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

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

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

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

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

宣传栏