18

对于这是一个开放式问题，我深表歉意，但我不知所措。

从 jquery UI 的 1.9 版开始，他们使用该cookie选项贬值，以便跨多个页面保存选项卡的活动状态。http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

我现在还没有看到有关如何完成此任务的任何其他文档！所以我只能摸不着头脑。

我最好的猜测是使用某种方式event创建 cookie，然后加载 cookie？或者是否有其他方法可以跨多个页面并根据用户偏好保存选项卡的活动状态？

4

6 回答 6

19

今天有同样的问题咬我。这似乎有效：

  1. 使用 jquery.cookie 插件（https://github.com/carhartl/jquery-cookie）（这一步不是必须的，但它让处理 cookie 的工作更轻松）

  2. 使用以下代码片段：

    $( ".selector" ).tabs({
    active   : $.cookie('activetab'),
    activate : function( event, ui ){
        $.cookie( 'activetab', ui.newTab.index(),{
            expires : 10
        });
    }
});

这会设置一个名为“activetab”的 cookie，该 cookie 在 10 天后过期（有关更多选项，请参阅jquery.cookie 文档），以便在单击任何选项卡时记住当前选定的选项卡。在初始化时读取此 cookie 以显示最后保存的选项卡。第一次访问页面时，选项卡将被折叠。

于 2013-09-03T22:25:18.347 回答
10

使用localStorage执行此操作的简短、独立于布局的方式：

$("#tabs").tabs({
  active: localStorage.getItem("currentIdx"),
  activate: function(event, ui) {
      localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
  }
});

一种使用自定义数据属性的特定于布局的方法（如果要在脚本的其他地方以某种方式使用属性值，则可能很有用）。

jQuery 用户界面：

$("#tabs").tabs({
    active: localStorage.getItem("currentTabIndex"),
    activate: function(event, ui) {
        localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);
    }
});

示例 HTML 布局：

<div id="tabs">
    <div id="tabs-1" data-tab-index="0">
       tab 1 stuff...
    </div>
    <div id="tabs-2" data-tab-index="1">
       tab 2 stuff...
    </div>    
    <div id="tabs-3" data-tab-index="2">
       tab 3 stuff...
    </div>
</div>
于 2015-03-03T02:54:04.137 回答
6

事件 tabsactivate 然后存储到 sessionStorage 或 localStorage。

$(function() {
    var selectedTabId = sessionStorage.getItem("selectedTab");
    selectedTabId = selectedTabId === null ? 0 : selectedTabId; //your default being 0
    $("#tabs").tabs({
        active: selectedTabId,
        activate : function( event, ui ) {
            selectedTabId = $("#tabs").tabs("option", "active");
            sessionStorage.setItem("selectedTab", selectedTabId);
        }
    });
});
于 2014-12-07T10:09:10.693 回答
5

使用 HTML5 的 localStorage 特性可以解决这个问题，现在是推荐的做这类事情的方法。Cookie 会导致将额外数据添加到每个 Web 请求和响应中。

您会发现像 IE8 这样过时的浏览器都支持localStorage ，如果您真的想要支持 IE6 和 IE7，那么可以使用shim。

HTML

<div class="mytab" id="mytab_1">
 <ul>....</ul>
 <div id="xx1">...</div>
 ...
</div>

JS

currTabIndex=sessionStorage['mytab_1'];

和制表功能调用

$('.mytab').tabs({
 active:currTabIndex,
 load:function(event,ui){
  sessionStorage[''+this.id]=(ui.panel.index()-1);
 }
});

希望这会有所帮助。

于 2013-10-22T14:26:26.797 回答
4

简单地：

activate: function(event, ui) {        
    localStorage.setItem("accIndex", $(this).tabs("option", "active"))
},
active: parseInt(localStorage.getItem("accIndex"))
于 2015-03-11T11:26:25.260 回答
1

您可以使用活动选项设置活动选项卡，例如

$( ".selector" ).tabs({ active: 1 });

除了 cookie，还有很多方法可以将值传递给网页。例如，您可以使用查询参数和隐藏字段。然后，您将创建一个 onload 脚本，该脚本将使用 jQuery 的 onload 示例读取任一示例。$（函数（）{}）。

要阅读查询字符串，请查看此页面，它为您提供方法

jquery读取查询字符串

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

并读取隐藏字段。

$( ".selector" ).tabs({ active: $('#my-hidden-fiel').val() });

我同意 jquery ui 删除此功能的决定，因为在我看来，cookie 实际上应该只用于保持会话，而不是形成字段或选项卡。

于 2013-01-14T04:22:44.437 回答