Jquery回发,在回发后维护相同的选项卡

我正在使用jquery选项卡并遵循js方法,如何以及如何修改它以维护回发之间的tab状态? (这会在page_load之后将制表符重置为第一个制表符)

$(document).ready(function() { //When page loads... $(".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() { $("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 href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); 

您可以使用Javascript跟踪隐藏字段中的活动选项卡,然后在加载页面时检查隐藏字段。 (也是在Javascript中)

或者,您可以使用UpdatePanels与ASP.Net AJAX来消除回发。 (请注意,如果选项卡位于更新面板中,它们将无法正常工作)

使用隐藏字段的替代方法是使用选项卡控件上的cookie属性

$(“#tabs”)。tabs({cookie:{expires:1}});

您需要引用jquery.cookie.js文件才能生效

jQuery选项卡cookie

请尝试以下方法:

 

你说

  //When page loads... $(".tab_content").hide(); //Hide all content 

我会用css加载它,因为它更快。 hide可能正在显示:none;

一个解决方案是从codebehind编写javascript。
和c#的例子

 var selectedTab = IsAdvancedSearch ? "{'selected':1}" : String.Empty; ScriptManager.RegisterClientScriptBlock(this, GetType(), "search", String.Format(@"jQuery(document).ready(function() {{ jQuery('#search').tabs({0}); }});", selectedTab), true); 

或者您可以使用C#向#search标记添加属性并使用js读取它

C#

 search.Attributes.Add("selectedtab", "1"); 

JS

 jQuery("#search").attr("selectedtab"); 

另一个解决方案是使用查询字符串。
你可以从查询字符串中读取值。

我个人会选择第一个或第二个。

隐藏的现场方法对我很有用。 包含.aspx

  

和包含的js ready函数

 $("#tabs").tabs({ active: <%= hfLastTab.Value %> }); 

将根据隐藏字段设置活动选项卡。 (这是jQuery UI v1.9属性,’active’fka’selected’。)回发的各种控件可以提供将hfLastTab.Value设置为适当的索引。

我还希望能够指向具有来自另一个页面的URL的特定选项卡,并且在转到查询字符串参数之前花费了大量时间来添加并尝试解析散列引用,?t = N. 我在Page_Load()的.Page.IsPostback分支中解析了它。 对于新页面加载,如果没有指定,我们将转到选项卡0,如果查询字符串具有参数,则转到选项卡N. 有很多方法可以处理解析。 这是一个:

  if (!Page.IsPostBack) { string pat = @"t=(\d)"; Regex r = new Regex(pat, RegexOptions.IgnoreCase); Match m = r.Match(Request.Url.Query); if (m.Success) hfLastTab.Value = m.Groups[0].ToString(); }