300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 切换tab页 页面局部刷新 地址栏路径修改

切换tab页 页面局部刷新 地址栏路径修改

时间:2024-02-21 17:29:19

相关推荐

切换tab页 页面局部刷新 地址栏路径修改

需求:

做一个类似百度这种,切换tab,页面展示局部刷新的效果。

思路:

tab展示的切换,使用display控制。但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记。但如果用a的href或者location.href 均会将整个页面刷新,体验很差,故需只修改地址栏路径,但不刷新页面。解决方案:

在切换tab时,

先处理隐藏显示区域的内容,

再将地址栏的内容改掉,如下:

window.history.replaceState(null,null,'./tabDemo.html?tab=tab_a');

demo 核心js:

$('.search_bar .search_tab').click(function(){$('.search_bar .search_tab').removeClass('active');$(this).addClass('active');if(this.id == 'tabB'){$('.contentA').hide();$('.contentB').show(); window.history.replaceState(null,null,'./tabDemo.html?tab=tab_b');}else{$('.contentA').show();$('.contentB').hide(); window.history.replaceState(null,null,'./tabDemo.html?tab=tab_a');}});

完整demo见:

/download/dorothy1224/10786057

补充关于pushState的知识:

history对象的方法。

history.pushState():

history.pushState方法接受三个参数,依次为:

state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

pushState方法不会触发页面刷新,只是导致history对象发生变化,地址栏会有反应。

history.replaceState():

history.replaceState方法的参数与pushState方法一模一样,区别是它修改浏览历史中当前纪录。

关于pushState 可参考W3C的讲解,很清晰:

/javascript_guide/javascript_guide-uz9v269y.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。