页面刷新后如何保持在活动标签上？答案

【问题标题】：How to stay on active tab after refresh on page?页面刷新后如何保持在活动标签上？
【发布时间】：2015-06-13 07:36:36
【问题描述】：

我设计了一个标签页，并按照这篇文章的说明进行操作： http://alexchizhov.com/pwstabs/

刷新页面时如何停留在当前标签页？

这是我的代码：

jQuery(document).ready(function ($) {
   $('.tabset0').pwstabs();
   $('.tabset1').pwstabs({
      effect: 'scale',
      defaultTab: 3,
      containerWidth: '600px'
   });
   $('.tabset2').pwstabs({
      effect: 'slideleft',
      defaultTab: 2,
      containerWidth: '600px'
   });
   $('.tabset3').pwstabs({
      effect: 'slidetop',
      defaultTab: 3,
      containerWidth: '600px'
   });

});

<div class="content">
    <div class="tabset0">
        <div data-pws-tab="tab1" data-pws-tab-name="First Tab">
            First tab Content
        </div>
        <div data-pws-tab="tab2" data-pws-tab-name="Second Tab">
            Second tab Content
        </div>
        <div data-pws-tab="tab3" data-pws-tab-name="Third Tab">
            Third tab Content
        </div>
    </div>
</div>

如果有人能提供一些启示并帮助我解决这个问题，我将不胜感激。

【问题讨论】：

标签： jquery tabs refresh

【解决方案1】：

我不会使用 cookie，因为用户可能希望共享此链接，

相反，我会在带有 tabId 或其他内容的 url 中添加一个标签，

例如：http://alexchizhov.com/pwstabs#tabId 并在识别选定选项卡后使用 javascript 选择正确的选项卡。（就像路由一样）

但是，如果您对让用户共享链接不感兴趣，则可能将数据保存在 localStorage / SessionStorage（仅限当前选项卡）/cookie 可能是您的正确解决方案

** 编辑： **

要执行上述建议的解决方案，只需将一个 js 文件添加到包含该选项卡的整个页面，我们将其命名为 tabRouting.js，该脚本可以如下所示（未经过测试，尽管它会给你这个想法):

//url looking for : mydomain.com/#tab=tabId
(function($) {
    var hashString = window.location.href.split("#")[1];
    if(hashString)
    {           
        var tabId = hashString.replace(/tab=/, ""); 
        var tabItem = $("#" + tabId );
        $(tabItem).addClass("selected");
    }
})(jQuery)

此代码必须在选项卡呈现后运行。另请注意，如果您计划更多地使用主题标签字符串，则需要增强此正则表达式。

【讨论】：

你能告诉我如何一步一步做吗？！
我已经编辑了我的答案，当然您需要进行调整才能将其应用到您的应用中

【解决方案2】：

您可以在“打开”选项卡时设置 cookie，并在页面加载时读取 cookie 并使用 PWS 的 defaultTab 设置。不幸的是，PWS 在更改选项卡时似乎不会调度事件，因此您必须将其绑定到“选项卡按钮”。

使用js-cookie，读取cookie可能是这样的：

jQuery(document).ready(function ($) {
     var pwsTab3Settings = {
        effect: 'slidetop',
        defaultTab: 3,
        containerWidth: '600px'
     };

     if(Cookies.get('pwstab3')) {
       pwsTab3Settings.defaultTab = Cookies.get('pwstab3');
     }

     $('.tabset3').pwstabs(pwsTab3Settings);
  });

【讨论】：