Jquery postback, maintain same tab after postback

Question

I'm using jquery tab and following js method, how and what can i modify it to maintain state of tab between postbacks? (This resets tabs to first tab after page_load)

$(document).ready(function() {

        //When page loads...
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul.tabs li").click(function() {

            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        }); 

Answer 1

You can track the active tab in a hidden field using Javascript, then check the hidden field when the page is loaded. (Also in Javascript)

Alternatively, you can use UpdatePanels with ASP.Net AJAX to eliminate the postbacks. (Note that if the tabs are in an update panel, they won't work correctly)

Answer 2

An alternative to using a hidden field is to use the cookie property on the tab control

$("#tabs").tabs({ cookie: { expires: 1 } });

You need to reference the jquery.cookie.js file for this to work

jQuery tabs cookie