[英]Preserve Active Tab after PostBack when using Simple Tab in Asp.Net
我正在为ASP.NET Web应用程序使用简单选项卡 。 您可以在此处查看简单标签的演示 。
即使回发后,我也想保留“活动”标签。
我尝试编写以下代码,但无法取得进展。
$(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;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.