- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
新手切换到风水，再点击某一遍文章的时候，利用window.history.back()返回上一页，但是返回上一个页面的时候，代码刷新了，tab状态从风水跳回新手；有什么办法保持我上一页的代码不刷新；
高洛峰2017-04-11 12:05:35
方法1:做成单页面，通过url hash或history.pushState来保持当前页面的状态，监听popstate事件
方法2:在页面tab切换的时候的，通过history.replaceState将当前的页面状态保持-将修改页面的URL的，但是不会重新加载页面；当页面返回重新显示的时候，判断是否有特定值
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>History replace</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
.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;
}
</style>
<script>
$(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");
}
});
</script>
</head>
<body>
<p class="tab">
<p class="tab1 tab-option selected" data-tab-id="0">Tab1</p>
<p class="tab2 tab-option" data-tab-id="1">Tab2</p>
<p></p>
</p>
<p class="tab-content show" data-tab-id="0">
<p><a href="ptest.html">detail</a></p>
</p>
<p class="tab-content" data-tab-id="1">
<p>TAB2 Content
<p><a href="ptest.html">detail</a></p>
</p>
</p>
</body>
</html>
