html返回不刷新页面,js有什么办法返回上一个页面并不刷新代码
方法1:做成单页面,通过url hash或history.pushState来保持当前页面的状态,监听popstate事件
方法2:在页面tab切换的时候的,通过history.replaceState将当前的页面状态保持-将修改页面的URL的,但是不会重新加载页面;当页面返回重新显示的时候,判断是否有特定值
例如:
History replace
.tab{
width: 300px;
height: 50px;
background-color: #0a6ebd;
display: inline-block;
border: 1px solid #cccccc;
font-size: 0px;
line-height: 50px;
}
.tab .tab-option{
height: 100%;
width: 100px;
background-color: #0da6ec;
color:#000000;
display: inline-block;
color:#ffffff;
font-size: 14px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.tab .tab-option.selected{
background-color: #ffffff;
color:#000000;
}
.tab-content{
width: 100%;
height: 300px;
border: 1px solid #cccccc;
background-color: #ffffff;
display: none;
}
.tab-content.show{
display: block;
}
$(function(){
var defaultTabId="";
$(".tab").on("click",".tab-option",function(){
var dataTabId=$(this).attr("data-tab-id");
$(".tab").find(".tab-option").removeClass("selected");
$(this).addClass("selected");
$('.tab-content').removeClass("show");
$('.tab-content[data-tab-id='+dataTabId+']').addClass("show");
history.replaceState({selectedTab:dataTabId},"","#tab="+dataTabId);
});
if(location.hash){
defaultTabId=location.hash.substr(1).split("=")[1];
console.log(defaultTabId);
$(".tab").find(".tab-option").removeClass("selected");
$('.tab-option[data-tab-id='+defaultTabId+']').addClass("selected");
$('.tab-content').removeClass("show");
$('.tab-content[data-tab-id='+defaultTabId+']').addClass("show");
}
});
html返回不刷新页面,js有什么办法返回上一个页面并不刷新代码相关推荐
- 微信小程序页面栈的使用,修改上一个页面里的数据
如果我的文章有帮助到大家,请点个赞,谢谢啦 正文开始! 第一个页面里 //wxss <input type="text" placeholder="请输入姓名&qu ...
- 微信小程序获取上一个页面的路由地址
let pages = getCurrentPages(); //页面对象 let prevpage = pages[pages.length - 2]; //上一个页面对象 cons ...
- js返回上一个页面而不刷新页面
go() 方法 语法:history.go(number|URL) 可加载历史列表中的某个具体的页面:参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置.(-1 ...
- jsp返回上一个页面并刷新
在jsp中有时候我们需要返回到上一个页面,将上一个页面的数据进行刷新.此情况用于:当返回页面之前,上一个页面的数据已经进行了增.删.改操作. 有一种方法是 οnclick="locat ...
- 解决ios端返回上一个页面不刷新页面的问题
javascript返回上一个页面也许你会立马想到几种方案: 1.<a href="javascript:history.go(-1)">返回上一页</a> ...
- uni-app返回上一个页面并进行页面刷新
适用两个不同的页面跳转,返回上一个页面保存并刷新修改后的数据(也解决了uni-app的navigateBack返回不刷新的方法之一) 当前页: 上一页: 思路: 1.用getCurrentPages( ...
- JavaScript中,返回上一个页面时,如何保证上一个页面的不刷新?
history.back()和history.go(-1)都可以实现返回上一页并不刷新.History 对象包含用户(在浏览器窗口中)访问过的 URL. history.back() 等同于在浏览器点 ...
- # js如何返回上一个页面
HTML通过内置js如何返回上一个页面 HTML通过内置js如何返回上一个页面 这里列举三个js返回上一页的方法 1.通过 window.history.back()方法返回: 例如: <but ...
- 返回上一个页面,并刷新
适用的范围:退出登录后跳转到上一个页面 PrintWriter out = this.getResponse().getWriter();out.write("<script type ...
最新文章
- linux隐藏文件的方法,Linux下隐藏文件的操作方法
- ui培训教程分享:平面设计怎样视觉空间感?
- castle windsor学习-----XML Inline Parameters 内联参数
- LOJ.2587.[APIO2018]铁人两项Duathlon(圆方树)
- Cpp / std::string 实现
- 国庆期间,我造了台计算机
- java 字符串数组定义_「string数组」string 数组怎么定义 - seo实验室
- Windows Phone开发(29):隔离存储C 转:http://blog.csdn.net/tcjiaan/article/details/7447469...
- oracle锁表怎么解决,Oracle锁表问题的简捷处理技巧
- 锻炼编程能力的10个游戏:通关既巅峰!
- IntelliJ IDEA 的这个接口调试工具真是太好用了!
- python闭包有什么作用_闭包在实际开发中有什么用?
- 服务器的hosts文件位置,Hosts文件位置和书写规范
- Docker系列之五:Docker 三剑客之 Docker Swarm
- 华为GAUSS数据库常用的单行操作函数介绍
- Fortran学习记录1(Fortran数据类型)
- 数据分析之路的尽头是创业?
- Java集合体系总结
- Hive中数据倾斜和小文件过多的解决方案
- Tabula Rasa中的延迟着色技术