You can use $.cookie
directly to provide your custom behaviour. In a nutshell on creation of the tabs controls (in the create event) check to see if there is a cookie value. If so then set the selected tab based on the value. And store it on click of the button:
$(function() {
$( "#tabs" ).tabs({
select: function(event, ui) {
window.location.replace(ui.tab.hash);
},
create: function(e, ui) {
var tabs = $(e.target);
// Get the value from the cookie
var value = $.cookie('selected-tab');
if(value) {
console.log('Setting value %s', value);
// Set which tab should be selected. Older jQuery UI API
tabs.tabs('select',value);
}
},
});
$(".my_button").click(function() {
var value = $(this).attr("value");
console.log('Storing tab %s', value);
// Store value with key "selected-tab" and set it to expire
// in one day.
$.cookie('selected-tab', value, {expires: 1});
});
});
In newer versions of jQuery UI (verified on 1.9+) you need to use the active options with a tab index to select the tab.
Example:
//store as value in above example or dynamically find index based on the id
var selectedIndex = 1;
$('#tabs').tabs('option', 'active', selectedIndex);
// Or even better pass the active index when creating the tabs control
$('#tabs').tabs({ active: selectedIndex });