在Asp.Net中使用简单选项卡时，在回发后保留活动选项卡

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

本文关键字：选项保留活动简单 Net Asp 更新时间：2023-09-26

我正在使用简单的选项卡ASP。. NET web应用程序。你可以在这里看到简单选项卡的演示。

我想保留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;
            });
        });

经过多次尝试。

在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;
        });
    });