Preserve Active Tab after PostBack when using Simple Tab in Asp.Net

Question

I am using Simple Tab for ASP.NET web application. You can see the Demo of simple tab here.

I want to preserve the Active tab even after postback.

I tried writing the following code but couldnot make the progress.

       $(document).ready(function () {
            debugger;
            //Default Action
            var activeTab;
            if (activeTab == undefined) { <-- Added by me but the variable activeTab is refreshing every time and is undefined for every post back.
                $(".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 () {
                debugger;
                $("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
                activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active content
                return false;
            });

        });

Answer 1

After a lot of trails.

In asp.net page use the following Hidden Field.

<asp:HiddenField ID="hdnActiveTab" runat="server" Value="0" />

Now modify the code as below.

   $(document).ready(function () {
        //debugger;
        //Default Action
        var setActiveTab = $get("<%=hdnActiveTab.ClientID%>").value;
        if (setActiveTab == 0) {
            $(".tab_content").hide(); //Hide all content
            $("ul.tabs li:first").addClass("active").show(); //Activate first tab
            $(".tab_content:first").show(); //Show first tab content
        } else {$(".tab_content").hide(); 
            switch (setActiveTab) {
                case "#tab1":
                    $("ul.tabs li:eq(0)").addClass("active").show(); $(".tab_content:eq(0)").show();
                    break;
                case "#tab2":
                    $("ul.tabs li:eq(1)").addClass("active").show(); $(".tab_content:eq(1)").show();
                    break;
                case "#tab3":
                    $("ul.tabs li:eq(2)").addClass("active").show(); $(".tab_content:eq(2)").show();
                    break;
                case "#tab4":
                    $("ul.tabs li:eq(3)").addClass("active").show(); $(".tab_content:eq(3)").show();
                    break;
            }
        }
        //On Click Event
        $("ul.tabs li").click(function () {
            //debugger;
            $("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 rel attribute value to identify the active tab + content
            $get("<%=hdnActiveTab.ClientID%>").value = activeTab; //Preserve Active Tab Even After PostBack
            $(activeTab).fadeIn(); //Fade in the active content
            return false;
        });

    });