retain state of jquery ui tabs

Question

i am using this jquery ui

http://jqueryui.com/tabs/

tab in my project. but after refreshing page it does not retain that active tab .. any one know how to do that

http://jqueryui.com/tabs/

<div id="tabs">
    <ul>
        <li> <a href="#tabs-1"> Active </a> 
        </li>
        <li> <a href="#tabs-3"> Expired</a> 
        </li>
    </ul>
    <div id="tabs-1"></div>

Answer 1

Relay the information with an hidden file.

Function to write to hidden file

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, " "));
}

Get the parameter.

var param = getParameterByName('yourVar');

ref: Jquery read query string

Answer 2

You can use jquery-cokkie plugin for same as jquery has deprecated cookie option for tabs (See this).

$( "#tabs" ).tabs({
active   : $.cookie('remembertab'),
activate : function( event, ui ){
    $.cookie( 'remembertab', ui.newTab.index(),{
        expires : 7
    });
}
});

This will set the cookie remembertab active for 7 days