Question

我设计了一个标签页，并按照此帖子的说明操作： 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>

如果有人能够解决这些问题，我将不胜感激。

Answer 1

我不会用cookie来做，因为用户可能想要分享这个链接，

相反，我会使用tabId或其他东西，

将标签添加到网址

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

但是，如果您没有兴趣让用户共享链接，可能会将数据保存在localStorage / SessionStorage中（仅适用于当前选项卡）/ cookies可能是您正确的解决方案

** 修改： **

要执行上面建议的解决方案，只需将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)

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

Answer 2

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

使用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);
  });

如何在页面刷新后保持活动选项卡？

2 个答案: