js实现进入二级页面后仍然选中菜单栏中的某个菜单（二级页面与菜单栏绑定）

版权声明：如需转载，请带上本博客链接 https://blog.csdn.net/weixin_42869591/article/details/83002215

 

前言

我们通常在点击左侧菜单栏的某个菜单后，会进入一个页面，并将该菜单选中高亮显示；
但是往往在一个页面中，会链接到其他页面，通过第一个页面进入第二个页面后，怎么才能让该菜单仍然是选中且高亮显示的状态呢？

用到的知识点

1.addclass("active")，给菜单的class添加active属性；

2.var _sitemap = new Array();，定义一个数组，存入当前页面和第一级页面；

3.var w_url = window.location.href; ,获取当前页面的url；

4.parent()，获取当元素的直接父级元素；

5.object.entries(),返回一个数组，其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

代码示例

<script>
    //获取当前页面url
    var w_url = window.location.href;

    //定义数组
     var _sitemap = new Array();
    //将二级页面和一级页面存入数组中，冒号左侧是二级及多级页面，右侧是一级页面
     _sitemap = {
          "http://www.baidu.net/XXX.html":"http://www.baidu.net/aaa.html",
          "http://www.baidu.net/CCC.html":"http://www.baidu.net/ddd.html",
    
     }
     
     //根据url选中导航菜单

     //Object.entries()方法将_sitemap数组变为可枚举的键值对数组
     //var key of Object.entries(_sitemap) 结果是：       [["http://www.baidu.net/XXX.html","http://www.baidu.net/aaa.html"],["http://www.baidu.net/CCC.html","http://www.baidu.net/ddd.html"]]
     for(var key of Object.entries(_sitemap)){
        if (w_url == key[0]) {
            w_url = key[1]
        }
     }

    setTimeout(function(){
         $('#sidebar .nav li a').each(function () {
                        $(this).parent().removeClass("active");
                            $(this).parent().parent().parent().parent().addClass("active");
                            //打开当前页面所挨着的菜单的直接父级元素
                            $(this).parent().parent().parent().addClass("active");
                            $(this).parent().addClass("active");
                            //选中当前页面所紧挨着的菜单
                            $(this).addClass("active");
                            //如果菜单栏层级比较深，可以根据层级添加parent()个数
                    });
    },0)
    
</script>