之前写电商网页的时候，很多个页面的需求是有多个选项卡，点击不同选项卡进行切换，点击当前选项卡的某个链接跳转之后，按回退历史键，如果不进行任何处理，页面会默认回到第一个选项卡，这样客户体验感，之后找到了解决方法，分享出来希望对大家有帮助：
在页面tab切换的时候的，通过history.replaceState将当前的页面状态保持-将修改页面的URL的，但是不会重新加载页面；当页面返回重新显示的时候，判断是否有特定值。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>History replace</title> <script type="text/javascript" src="../js/jquery-1.12.0.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]; $(".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> <div class="tab"> <div class="tab1 tab-option selected" data-tab-id="0">Tab1</div> <div class="tab2 tab-option" data-tab-id="1">Tab2</div> <div></div> </div> <div class="tab-content show" data-tab-id="0"> <div><a href="divtest.html">detail</a></div> </div> <div class="tab-content" data-tab-id="1"> <div>TAB2 Content <div><a href="test.html">detail</a></div> </div> </div> </body> </html>
文章转自：https://blog.csdn.net/caikys/article/details/78685922