Saving state of jQuery UI tabs

问题

I am using jQuery UI 1.9, and I've implemented the tabs widget pretty much as detailed on the demo page. PHP provides the data inside the tabs dynamically.

<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>

My question is this - how can I save the state of the tabs? So if I'm looking at one client, and I open the 'Personal' tab, how can I load up the next client, and automatically be showing the same tab?

I've looked around the web, and previous answers point to using the cookie option. Failed testing and some further research suggest that this feature was deprecated in 1.9, so I'm not sure if there is even a way to do this anymore?

Thanks

回答1:

Seems like jQuery UI got rid of maintaining state with the latest implementation.

Before, it pretty simple to keep state across page loads with jQuery tabs. This is one possible way to do it with the new code. Its still pretty easy, just a little different.

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

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

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

回答2:

Here's how I would implement a session tracking variable......

$(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>

I'm just providing some logic for a possible solution. It should help get you started.

来源：https://stackoverflow.com/questions/14160394/saving-state-of-jquery-ui-tabs