html的tab页面切换刷新,切换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见：

https://download..net/download/dorothy1224/10786057

补充关于pushState 的知识：

history对象的方法。

history.pushState()：

history.pushState 方法接受三个参数，依次为：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

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

history.replaceState()：

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

关于pushState 可参考W3C的讲解，很清晰：

https://www.w3cschool.cn/javascript_guide/javascript_guide-uz9v269y.html

html的tab页面切换刷新,切换tab页，页面局部刷新，地址栏路径修改相关推荐

切换tab页，页面局部刷新，地址栏路径修改
需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果. 思路: tab展示的切换,使用display控制.但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记.但如果用 ...
php ajax局部刷新div,php与ajax局部刷新的简单示例
1,文件 index.php 页面局部刷新_www.jbxue.com 用户 GM 未读消息()条 2,文件 fun.js,注意empty判断. /** * 局部刷新js代码 * edit www.j ...
js 只刷新ajax,JS实现AJAX局部刷新（附代码）
这次给大家带来JS实现AJAX局部刷新(附代码),JS实现AJAX局部刷新的注意事项有哪些,下面就是实战案例,一起来看一下. AJAX即"Asynchronous Javascript An ...
android局部布局刷新,Android之RecyclerView的局部刷新
局部更新方法 1.使用Diffutil进行数据的比较 [Android]详解7.0带来的新工具类:DiffUtil 1.1一个相对完整的例子 Android高性能列表:RecyclerView + D ...
ajax局部刷新对应的div,ajax局部刷新一个div下的jsp
用AJAX刷新一个DIV中的jsp内容 var xmlhttp; function startrefresh(){ xmlhttp=new XMLHttpRequest(); xmlhttp.open ...
ajax局部刷新不出来,关于Ajax局部刷新未出来数据的问题
我的代码如下所示 pageEncoding="UTF-8"%> Insert title here window.οnlοad=function(){ var nameEle ...
Servlet向JSP传递数据以及JSP页面DIV定时局部刷新
系列文章: ESP8266的AP模式与STA模式简单测试简单的Java服务器和客户端的通信 STM32 ESP8266和Java服务器透传模式下的双向通信 jsp向servlet传输数据 Servl ...
js实现页面指定区域局部刷新
以下总结了一些常用的前端刷新页面的方法: <a href="javascript:" onclick="history.go(-2); ">返回前两 ...
vue实现页面刷新以及局部刷新的方法
1.利用Vue里面的provide+inject组合,实现全页面刷新通过在APP页面进行demo进行刷新,不会像前两种那样出现短暂的闪烁效果,提升用户体验,通常可以使用这种方式 (1)在APP页面中 ...

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

html的tab页面切换刷新,切换tab页，页面局部刷新，地址栏路径修改相关推荐

最新文章

热门文章