c# - Asp.Net でシンプル タブを使用する場合、PostBack 後にアクティブなタブを保持する

Question

ASP.NET Web アプリケーションにSimple Tabを使用しています。ここでシンプルなタブのデモを見ることができ ます。

ポストバック後も Active タブを保持したい。

次のコードを書いてみましたが、進行できませんでした。

       $(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

たくさんのトレイルの後。

asp.net ページでは、次の隠しフィールドを使用します。

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

次に、コードを次のように変更します。

   $(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;
        });

    });