方法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");
}
});
Tab1Tab2detailTAB2 Contentdetail
