Maintaining jQuery-ui previous active tab (before reload) on page reload

Question

I have a jquery-ui tab component with two tabs.

  @Html.Hidden(\"SelectedTabId\")
  

    


        

      

Answer 1

Use browser sessionStorage to store the tab index,

something like this:

$(document).ready(function () {
    var currentTabIndex = "0";

    $tab = $("#tabs").tabs({
         activate : function (e, ui) {
            currentTabIndex = ui.newTab.index().toString();
            sessionStorage.setItem('tab-index', currentTabIndex);
         }
    });

    if (sessionStorage.getItem('tab-index') != null) {
        currentTabIndex = sessionStorage.getItem('tab-index');
        console.log(currentTabIndex);
        $tab.tabs('option', 'active', currentTabIndex);
    }
    $('#btn-sub').on('click', function () {
        sessionStorage.setItem("tab-index", currentTabIndex);
        //window.location = "/Home/Index/";
    });
});

this will update the sessionStorage on changing the tab, try updating the tab by using your condition. I hope it helps.

here is the Demo for local storage

You can remove the sessionStorage by using sessionStorage.removeItem('tab-index');

sessionStorage is cleared automatically when the browser is closed. It works in pretty much the same way as localStorage.

here is the Demo for sessionStorage