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 problem and know how to solve it?

Answer 1

Like others I was struggling with my ui-tabs cookie history in jQueryUI 1.10. Thanks to Harry's solution and some other online documentation I refer to in the code below I now have a working non-cookie solution! I was able to test in Firefox 18.0.1 and IE 9.0.12. According to my resources, Chrome, Firefox, Safari and IE8 & above support Session Storage.

  $(function() {     //  jQueryUI 1.10 and HTML5 ready     //      http://jqueryui.com/upgrade-guide/1.10/#removed-cookie-option      //  Documentation     //      http://api.jqueryui.com/tabs/#option-active     //      http://api.jqueryui.com/tabs/#event-activate     //      http://balaarjunan.wordpress.com/2010/11/10/html5-session-storage-key-things-to-consider/     //     //  Define friendly index name     var index = 'key';     //  Define friendly data store name     var dataStore = window.sessionStorage;     //  Start magic!     try {         // getter: Fetch previous value         var oldIndex = dataStore.getItem(index);     } catch(e) {         // getter: Always default to first tab in error state         var oldIndex = 0;     }     $('#tabs').tabs({         // The zero-based index of the panel that is active (open)         active : oldIndex,         // Triggered after a tab has been activated         activate : function( event, ui ){             //  Get future value             var newIndex = ui.newTab.parent().children().index(ui.newTab);             //  Set future value             dataStore.setItem( index, newIndex )          }     });      });  

Answer 2

I assume that you are using jQuery UI tabs ,

here is an example of using tabs + cookies to save the last clicked tab

http://jqueryui.com/demos/tabs/#cookie

demo : open this link http://jqueryui.com/demos/tabs/cookie.html

the close it and re open it and you will see the same clicked tab

update: after 3 years of this answer jquery ui has deprecated the cookie option : http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option.

but you can still append take a look here if this fits your needs or not https://stackoverflow.com/a/14313315/109217