保存 jQuery UI 选项卡的状态答案

【问题标题】：Saving state of jQuery UI tabs保存 jQuery UI 选项卡的状态
【发布时间】：2013-12-16 13:44:39
【问题描述】：

我使用的是 jQuery UI 1.9，并且我已经实现了几乎与演示页面上详述的选项卡小部件。 PHP 动态提供选项卡内的数据。

<script>

$(function()
    {
        $( "#tabs" ).tabs(
            {
                collapsible: true                   
            });
    });

</script>

<div id="tabs">

    <ul>
        <li><a href="#holdings">Holdings</a></li>
        <li><a href="#personal">Personal</a></li>
        <li><a href="#account">Account</a></li>
    </ul>

    <div id="holdings">
        blah blah blah
    </div>

    <div id="personal">
        blah blah blah
    </div>

    <div id="account">
        blah blah blah
    </div>

</div>

我的问题是——如何保存选项卡的状态？因此，如果我正在查看一个客户端，并且打开“个人”选项卡，我如何加载下一个客户端并自动显示相同的选项卡？

我浏览了网络，之前的答案指向使用 cookie 选项。失败的测试和一些进一步的研究表明该功能在 1.9 中已被弃用，所以我不确定是否还有办法做到这一点？

谢谢

【问题讨论】：

实现您自己的 cookie 解决方案，或创建一个名为“client_tab_index”的会话项并参考。

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

似乎 jQuery UI 摆脱了使用最新实现来维护状态。

以前，使用 jQuery 选项卡在页面加载时保持状态非常简单。这是使用新代码执行此操作的一种可能方法。它仍然很容易，只是有点不同。

$("#tabs").tabs({
    activate: function (e, ui) { 

    $.cookie('selected-tab', ui.newTab.index(), { path: '/' }); 

}, 
   active: $.cookie('selected-tab')  
});

【讨论】：

【解决方案2】：

以下是我将如何实现会话跟踪变量......

$(function()
    {
        $( "#tabs" ).tabs(
            {
               **create: function( event, ui ) {
                    //use the create method to see if a 'client-tab-index' session 
                    //variable is set.  if so, use it to open the needed tab. if not
                    // do nothing.
                },**
                collapsible: true  ,
                **activate: function( event, ui ) {
                      //use the activate method to store the current active tab
                      //to a 'client-tab-index' session variable.  the current tab 
                      //index value is referenced with ui.newTab
                }**
            });
    });

</script>

<div id="tabs">

    <ul>
        <li><a href="#holdings">Holdings</a></li>
        <li><a href="#personal">Personal</a></li>
        <li><a href="#account">Account</a></li>
    </ul>

    <div id="holdings">
        blah blah blah
    </div>

    <div id="personal">
        blah blah blah
    </div>

    <div id="account">
        blah blah blah
    </div>

</div>

我只是为可能的解决方案提供一些逻辑。它应该可以帮助您入门。

【讨论】：