Remember which tab was active after refresh

Question

I\'m using jquery tabs on a web page and when the page is refreshed it loses what ever tab I had been on and goes back to the first tab.

Has anyone come across this

Answer 1

Here is an alternative way to allow remembering the open tab by the element id (not index). This is useful, if you use this code to synchronize the open tabs on two different pages with similar elements (like show and edit page).

var tabsid = "#tabs";
var cookieid = "tabs_selected2";

var activetabnr = 0;
if (($.cookie(cookieid)!=null) && ($.cookie(cookieid)!="")) {
   activetabnr = $(tabsid+' a[href="'+$.cookie(cookieid)+'"]').parent().index();
}

$(tabsid).tabs({
   active: $(tabsid).tabs({ active: activetabnr }),
   beforeActivate: function (event, ui) {
        $.cookie(cookieid, "#"+ui.newPanel.attr('id'));
   }
});

Works with jQuery UI 1.10. Do not forget to include the jquery.cookie plugin!