新手
风水
window.history.back()
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...
方法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>
做成单页应用就好
把首页你选择的tab分类存在缓存里吧 这样回退到首页就还能选择到之前的分类了
了解一下H5的history.pushState()
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
方法1:做成单页面，通过url hash或history.pushState来保持当前页面的状态，监听popstate事件
方法2:在页面tab切换的时候的，通过history.replaceState将当前的页面状态保持-将修改页面的URL的，但是不会重新加载页面；当页面返回重新显示的时候，判断是否有特定值
例如：
做成单页应用就好
把首页你选择的tab分类存在缓存里吧 这样回退到首页就还能选择到之前的分类了
了解一下H5的history.pushState()