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

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

 

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

 

方法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 與導航欄的連接地址去作匹配，匹配上的就加高亮顯示。我準備接下來寫四級菜單的時候用一下這個方法，還不知道會不會出現問題，有問題再來補充……