js實現進入二級頁面後仍然選中菜單欄中的某個菜單（二級頁面與菜單欄綁定）

 

前言

我們通常在點擊左側菜單欄的某個菜單後，會進入一個頁面，並將該菜單選中高亮顯示；
但是往往在一個頁面中，會鏈接到其他頁面，通過第一個頁面進入第二個頁面後，怎麼才能讓該菜單仍然是選中且高亮顯示的狀態呢？

用到的知識點

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>