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

I've recently had the same problem and spent a longtime looking at the docs for JQuery UI Tabs Widget. I ended up using the events activate and create for JQuery UI 1.10 as well as localStorage to store the current tab before page refresh.

    $( ".selector" ).tabs({                                                 
        activate: function( event, ui) {
            //when tab is activated store it's index in activeTabIndex
                var activeTabIndex = $('.tabs').tabs('option','active');
            //add activeTabIndex to localStorage and set with key of 'currentTab'  
                localStorage.setItem('currentTab', activeTabIndex); 
                            },
            create: function( event, ui ) {
                $(".tabs").tabs({       
            //when tabs are created on page refresh, the active tab is set to index of 'currentTab' 
            //after getItem from localStorage
            active: localStorage.getItem('currentTab')
        });
      }
   });