码迷,mamicode.com
首页 > 其他好文 > 详细

页面刷新跳转后,导航栏高亮显示跳转前的点击位置

时间:2017-07-11 11:13:09      阅读:843      评论:0      收藏:0      [点我收藏+]

标签:ring   key   页面   取出   amp   href   表达式   value   ie6   

需求:比如有一个二级或三四级的菜单栏,页面不跳转时实现高亮显示是很容易的,网上有很多这样的素材。但是页面一跳转,新页面可就记不住你在上一个页面点击的位置了,也就不可能高亮显示。并且很多时候,跳转后的页面菜单栏是后台动态生成的,也就是菜单栏栏目不固定,那么就不可能给菜单栏高亮效果写死。不知道这个事利用前后台交互去做会不会容易点,但是现在是要用纯前台实现。

 

实现原理一:这时候必须找个地方给它把点击的位置存起来,等页面跳转后,从那个地方把标记取出来,再给导航相应的位置做高亮处理就好了。

 

方法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 与导航栏的链接地址去做匹配,匹配上的就加高亮显示。我准备接下来写四级菜单的时候用一下这个方法,还不知道会不会出现问题,有问题再来补充……

 

页面刷新跳转后,导航栏高亮显示跳转前的点击位置

标签:ring   key   页面   取出   amp   href   表达式   value   ie6   

原文地址:http://www.cnblogs.com/YYvam1288/p/7149339.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!