頁面刷新跳轉后，導航欄高亮顯示跳轉前的點擊位置

需求：比如有一個二級或三四級的菜單欄，頁面不跳轉時實現高亮顯示是很容易的，網上有很多這樣的素材。但是頁面一跳轉，新頁面可就記不住你在上一個頁面點擊的位置了，也就不可能高亮顯示。並且很多時候，跳轉后的頁面菜單欄是后台動態生成的，也就是菜單欄欄目不固定，那么就不可能給菜單欄高亮效果寫死。不知道這個事利用前后台交互去做會不會容易點，但是現在是要用純前台實現。

 

實現原理一：這時候必須找個地方給它把點擊的位置存起來，等頁面跳轉后，從那個地方把標記取出來，再給導航相應的位置做高亮處理就好了。

 

方法1：利用 H5 的 localStorage ，但是IE67不兼容，IE8還存在問題，項目要求兼容性的，所以干脆沒試過這方法。但是不要求兼容性的可以嘗試一下，我還沒來得及……

 

方法2：隱藏變量的方法應該也可行吧，但是頁面需要異步處理，就是說要把隱藏變量放到不被刷新的位置，然額~我們是頁面全刷新，這方法用不到。

 

方法3：利用 cookie 存儲，但是 cookie 有安全性問題，項目里不讓用。雖然不讓用，但是我也貼出來吧。這是3個封裝方法，可以直接調用的：

function getCookie(key){
    var arr1 = document.cookie.split('; ');
    for(var i=0;i<arr1.length;i++){
        var arr2 = arr1[i].split('=');
        if(arr2[0]==key){
            return decodeURI(arr2[1]);
        }
    }
}

function setCookie(key,value,t){
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + t);
    document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}

function removeCookie(key){
    setCookie(key,'',-1);
}

點擊的時候調用 setCookie()，標記位置。然后頁面跳轉初始化的時候調用 getCookie()，取出標記，高亮顯示菜單。

但是測試的時候有個問題，就是IE下 setCookie()方法放進去的值，頁面跳轉時就被清掉了，我還沒來得及查原因。火狐下測試沒問題，谷歌本地測不了。

 

方法4：利用 url 傳參，我用的是這個方法，跳轉后用 getUrlParam() 封裝方法把參數取出來。

window.onload = function(){
//獲取url中的參數
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象
        var r = window.location.search.substr(1).match(reg);  //匹配目標參數
        if (r != null) return unescape(r[2]); return null; //返回參數值
    }

    var lv = getUrlParam('lv');
    var aId = getUrlParam('aId');
}

遇到的問題：如果是外鏈接的話，外鏈接本身就有參數，再加上我這一堆參數，跳轉后就會出現問題。我是在初始化時循環導航欄的鏈接，就不給外鏈加標記參數了，就解決了。

我看到網上說，這種方法的缺點是在瀏覽器緩沖階段，會看不到高亮。等頁面加載完或導航欄加載完一段時間，才會變成高亮，有一個時間延遲。

 

實現原理二：

方法5：頁面跳轉初始化時就把 window.location.href 與導航欄的鏈接地址去做匹配，匹配上的就加高亮顯示。我准備接下來寫四級菜單的時候用一下這個方法，還不知道會不會出現問題，有問題再來補充……