方法1:创建单页，用url hash或history.pushState保持当前页的状态，监听popstate事件
方法2:在页面选项卡切换时，在history.replaceState中保持当前页面状态-修改页面的URL，但不重新加载页面； 确定页面返回并刷新时是否存在特定值
例如：
History replace .tab{
width: 300px；
height: 50px；
background-color: #0a6ebd；
显示：在线块；
border: 1px solid #cccccc；
字体大小： 0px；
line-height: 50px；
}
. tab .tab-option{
height: 100%；
width: 100px；
background-color: #0da6ec；
color:#000000；
显示：在线块；
color:#ffffff；
字体大小： 14px；
文本照明3360中心；
vertical-align :中间；
cursor: pointer；
}
. tab .tab-option.selected{
background-color: #ffffff；
color:#000000；
}
. tab-content{
width: 100%；
height: 300px；
border: 1px solid #cccccc；
background-color: #ffffff；
显示： none；
}
. tab-content.show{
显示：块；
}
$(function () )。
var defaultTabId=' '；
$ ().tab ) ).on )、click )、).tab-option )、function ) ) {
vardatatabid=$(this ).attr ) (data-taB-id )；
$ ().tab ) ).find ).tab-option ) ).removeclass ) ) selected )；
$(this ).addclass('selected )；
$('.tab-content ' ).removeclass('show )；
$ '.ta B- content [ data-ta B- id=' data tabid ' ' ].add class (' show ' )；
history.replacestate ({ selected tab : data tabid }，'，' #tab=' dataTabId )；
)；
if(location.hash ) {
dfault tabid=location.hash.substr (1).split('=' ) [1]
console.log(defaulttabid；
$ ().tab ) ).find ).tab-option ) ).removeclass ) ) selected )；
$ '.ta B- option [ data-ta B- id=' default tabid ' ' ] ).addclass('selected )；
$('.tab-content ' ).removeclass('show )；
$ '.ta B- content [ data-ta B- id=' default tabid ' ' ].add class (' show ' )；
}
)；
tab1tab2detail tab2content detail