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");

}

});

Tab1

Tab2

detail

TAB2 Content

detail