If you refresh or come back to a site often, it’s handy to have JQuery UI tabs remember which tab you were last on as you left. This simple script will handle that for you:
jQuery(function($) {
var index = 'qpsstats-active-tab';
// Define friendly data store name
var dataStore = window.sessionStorage;
var oldIndex = 0;
// Start magic!
try {
// getter: Fetch previous value
oldIndex = dataStore.getItem(index);
} catch(e) {}
$( "#tabs" ).tabs({
active: oldIndex,
activate: function(event, ui) {
// Get future value
var newIndex = ui.newTab.parent().children().index(ui.newTab);
// Set future value
try {
dataStore.setItem( index, newIndex );
} catch(e) {}
}
});
});
No other code is necessary. Add your tab markup as you normally would (Remember to give it a matching ID):
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
first tab
</div>
<div id="tabs-2">
second tab
</div>
<div id="tabs-3">
third tab
</div>
</div>