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 am resolved the same issue with the help of following blog.

HTML Tab

 <ul class="tabs clear-fix">
     <li class=""><a href="#tab=java" id="tab1-tab"><i class=" fa fa-search-plus fa-lg" style="font-size:16px; "></i>JAVA</a><span></span></li>
     <li class=""><a href="#tab=js"  id="tab2-tab"><i class=" fa fa-user fa-lg" style="font-size:16px;"></i>JAVA SCRIPT</a><span></span></li>
     <li><a href="#tab=c"  id="tab3-tab"><i class="fa fa-archive fa-lg" style="font-size:16px;"></i>C</a><span></span></li>
     <li><a href="#tab=c2"  id="tab4-tab"><i class=" fa fa-gift fa-lg" style="font-size:16px;"></i>C++</a><span></span></li>
     <li><a href="#tab=jQ"  id="tab5-tab"><i class=" fa fa-heart fa-lg" style="font-size:16px;"></i>jQuery</a><span></span></li>
    </ul>

Javascript

 var selectedTab =  window.location.href.split("#tab=")[1] ;
    var selectedId = $('a[href$=' + selectedTab+']:first').attr('id');

    if (typeof selectedId === "undefined") {
         $('#tab1-tab').trigger("click");
    }
    else{
        $('#'+selectedId).trigger("click");
    }

For me it worked, suggestion appreciated.

Answer 2

Short, layout-independent way of doing this using localStorage:

$("#tabs").tabs({
  active: localStorage.getItem("currentIdx"),
  activate: function(event, ui) {
      localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
  }
});

---

A layout-specific way of doing it using custom data attributes (possibly useful if the attribute values were to be used in some way elsewhere in your script).

jQuery UI:

$("#tabs").tabs({
    active: localStorage.getItem("currentTabIndex"),
    activate: function(event, ui) {
        localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);
    }
});

Example HTML layout:

<div id="tabs">
    <div id="tabs-1" data-tab-index="0">
       tab 1 stuff...
    </div>
    <div id="tabs-2" data-tab-index="1">
       tab 2 stuff...
    </div>    
    <div id="tabs-3" data-tab-index="2">
       tab 3 stuff...
    </div>
</div>

Answer 3

Now that cookie is gone in jQuery UI 1.10.0, I mixed Gayathiri's approach with the new options and events:

// using cookie plugin from https://github.com/carhartl/jquery-cookie

var tabCookieName = "ui-tabs-1";
$(".tabs").tabs({
    active : ($.cookie(tabCookieName) || 0);
    activate : function( event, ui ) {
        var newIndex = ui.newTab.parent().children().index(ui.newTab);
        // my setup requires the custom path, yours may not
        $.cookie(tabCookieName, newIndex, { path: window.location.pathname });
    }
});

Answer 4

When web pages refresh, they reload their state from the server, by requesting the page again.

Either the webserver needs to remember the state and supply the file differently than the default, or you may be able to use cookies or the hash-component of the URL and some jQuery to store the state, read it on load and restore it.

See the jquery.cookie plugin or SWFaddress, learn about manipulating hash values yourself or the jQuery History plugin.

The hash method has a particular attraction as it replicates changes of URL, so copy/paste of the URL still works, as do bookmarks.

Answer 5

Include the jquery cookies plugin :

<script type="text/javascript" src="/resources/js/jquery.cookies.2.2.0.min.js"></script>

declare a cookie name inside $.function({.. or document.ready as

var cookieName = "mycookie";

$("#tabs").tabs({
    selected : ($.cookies.get(cookieName) || 0),
    select : function(e, ui) {
        $.cookies.set(cookieName, ui.index);
    }
        });