jQuery选项卡选择特定选项卡

我有一个包含一组jQuery选项卡的页面。 所有选项卡都指向同一个目标div，但是通过ajax加载不同的内容。 当我执行初始整页加载时，我需要根据各种因素设置不同的活动选项卡。 目标div中的内容已经在服务器上为此初始加载设置，因此我不需要单击选项卡，我只需要将正确的选项卡设置为“选中”。 我已经尝试将相关“li”html元素的类设置为“ui-tabs-selected”。 这具有初始期望的效果，但是一旦加载页面然后在选择另一个选项卡时，预选的选项卡不会关闭，从而选择两个选项卡。

那么，有没有人知道预选一个标签的替代方法（不会导致它被点击），或者是我所看到的奇怪的“ui-tabs-selected”行为的解决方案。

谢谢。

 $(function() { $("#panelTabs").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); } } }); $("#panelTabs").tabs({ select: function(event, ui) { getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); } }); });  

以及构建UL的C＃片段：

 StringBuilder tabsLiteral = new StringBuilder(); tabsLiteral.Append("
"); foreach (KeyValuePair kvp in tabs) { tabsLiteral.Append("
"); // Note - the kvp.Value.URI determines what should happen when the Tab is clicked tabsLiteral.Append("" + kvp.Value.Caption + ""); tabsLiteral.Append("
"); } tabsLiteral.Append("
"); _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); HtmlGenericControl ctl = new HtmlGenericControl(); StringBuilder html = new StringBuilder(); html.Append(""); html.Append("$(\"#panelTabs\").tabs({selected: 2});"); html.Append(""); ctl.InnerHtml = html.ToString(); _panelTabs.Controls.Add(ctl); 

另一个版本：

 StringBuilder tabsLiteral = new StringBuilder(); tabsLiteral.Append("
"); foreach (KeyValuePair kvp in tabs) { string active = ""; if (currentTabCaption == kvp.Value.Caption) { //active = " class=\"ui-tabs-selected\""; } tabsLiteral.Append("
"); // Note - the kvp.Value.URI determines what should happen when the Tab is clicked tabsLiteral.Append("" + kvp.Value.Caption + ""); tabsLiteral.Append("
"); } tabsLiteral.Append("
"); _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); HtmlGenericControl ctl = new HtmlGenericControl(); StringBuilder html = new StringBuilder(); html.Append(""); //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); html.Append(@"$(function() { alert('initialising tabs'); $(""#panelTabs"").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html(""Couldn't load this tab. We'll try to fix this as soon as possible.""); } }, select: function(event, ui) { getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); } }); });"); html.Append("$(\"#panelTabs\").tabs({selected: 2});"); html.Append(""); ctl.InnerHtml = html.ToString(); //_panelTabs.Controls.Add(ctl); Page.Controls.Add(ctl); 

Answer 1

您可以在选项卡切换function内部的第一行删除所选的类：

 var uiTabsSelected = '.ui-tabs-selected'; $(uiTabsSelected).removeClass(uiTabsSelected); 

Answer 2

您正在寻找的是所选的选项 。 例如

 $("#MyTabs").tabs({ selected: 2 }); 

Answer 3

改变这个：

 html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 

对此：

 html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 

编辑：和……

 $(function() { $("#panelTabs").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); }}, select: function(event, ui) { getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); } }); }); 

Answer 4

如果有其他人来这里寻找答案，那么选择标签（jQuery UI 1.10）的当前 （截至此日期）方式是使用“active”选项：

使用指定的活动选项初始化选项卡：

 $( ".selector" ).tabs({ active: 1 }); 

http://api.jqueryui.com/tabs/#option-active

Answer 5

解决方案是添加和删除类，正如ethagnawl建议的那样。 以下C＃显示了正在构建的UL以及所需的jQuery脚本注入。 重要的一点是在show：function中操作类的函数。 正是这个代码解决了这个问题。

 StringBuilder tabsLiteral = new StringBuilder(); tabsLiteral.Append("
"); foreach (KeyValuePair kvp in tabs) { //string tabClass = " class=\"ui-state-default\""; string tabClass = " class=\"ui-state-default\""; if (currentTabCaption == kvp.Value.Caption) { tabClass = " class=\"ui-tabs-selected\""; } tabsLiteral.Append(""); //tabsLiteral.Append("
"); // Note - the kvp.Value.URI determines what should happen when the Tab is clicked tabsLiteral.Append("" + kvp.Value.Caption + ""); tabsLiteral.Append("
"); } tabsLiteral.Append("
"); _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); HtmlGenericControl ctl = new HtmlGenericControl(); StringBuilder html = new StringBuilder(); html.Append(""); ctl.InnerHtml = html.ToString(); //Page.Header.Controls.Add(ctl); // NEVER place script in the page header when the script must survive an AJAX delivery - it won't run Page.Controls.Add(ctl); // Acceptable to place script on the page, as it WILL survive AJAX delivery