Question

我正在使用Simple Tab用于ASP.NET Web应用程序。您可以在此处查看简单标签的Demo。

我想在回发后保留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;
        });

    });

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

1 个答案: