jQuery 选项卡选择特定选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3162148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery tabs selecting specific tab
提问by DEH
I have a page containing a set of jQuery tabs. All the tabs point at the same target div, but load it with different content via ajax. When I perform the initial full page load I need to set the active tab differently depending upon various factors. The content in the target div is already set on the server for this initial load, so I don't need to click the tab, I just need to set the correct tab to 'selected'. I have tried setting the class of the relevant "li" html element to "ui-tabs-selected". This has the initial desired effect, but once the page is loaded then on selecting another tab the preselected one does not switch off, leaving two tabs selected.
我有一个包含一组 jQuery 选项卡的页面。所有选项卡都指向同一个目标 div，但通过 ajax 加载不同的内容。当我执行初始整页加载时，我需要根据各种因素对活动选项卡进行不同的设置。目标 div 中的内容已经在服务器上为这个初始加载设置，所以我不需要单击选项卡，我只需要将正确的选项卡设置为“已选择”。我尝试将相关“li”html 元素的类设置为“ui-tabs-selected”。这具有最初所需的效果，但是一旦页面被加载，然后在选择另一个选项卡时，预选的选项卡不会关闭，留下两个选项卡被选中。
So, does anyone know an alternative way to preselect a tab (without causing it to be clicked), or a solution to the strange "ui-tabs-selected" behaviour that I am seeing.
那么，有没有人知道预选选项卡的替代方法（不会导致单击它），或者我看到的奇怪的“ui-tabs-selected”行为的解决方案。
Thanks.
谢谢。
<script type="text/javascript">
$(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');
}
});
});
</script>
And the C# fragment that builds the UL:
以及构建 UL 的 C# 片段：
StringBuilder tabsLiteral = new StringBuilder();
tabsLiteral.Append("<ul>");
foreach (KeyValuePair<string, Tab> kvp in tabs)
{
tabsLiteral.Append("<li>");
// Note - the kvp.Value.URI determines what should happen when the Tab is clicked
tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>");
tabsLiteral.Append("</li>");
}
tabsLiteral.Append("</ul>");
_panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));
HtmlGenericControl ctl = new HtmlGenericControl();
StringBuilder html = new StringBuilder();
html.Append("<script type=\"text/javascript\">");
html.Append("$(\"#panelTabs\").tabs({selected: 2});");
html.Append("</script>");
ctl.InnerHtml = html.ToString();
_panelTabs.Controls.Add(ctl);
Another version:
另一个版本：
StringBuilder tabsLiteral = new StringBuilder();
tabsLiteral.Append("<ul>");
foreach (KeyValuePair<string, Tab> kvp in tabs)
{
string active = "";
if (currentTabCaption == kvp.Value.Caption)
{
//active = " class=\"ui-tabs-selected\"";
}
tabsLiteral.Append("<li" + active + ">");
// Note - the kvp.Value.URI determines what should happen when the Tab is clicked
tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>");
tabsLiteral.Append("</li>");
}
tabsLiteral.Append("</ul>");
_panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));
HtmlGenericControl ctl = new HtmlGenericControl();
StringBuilder html = new StringBuilder();
html.Append("<script type=\"text/javascript\">");
//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("</script>");
ctl.InnerHtml = html.ToString();
//_panelTabs.Controls.Add(ctl);
Page.Controls.Add(ctl);
采纳答案by ethagnawl
You could have the first line inside of your tab toggle function remove the selected class:
您可以让选项卡切换功能内的第一行删除选定的类：
var uiTabsSelected = '.ui-tabs-selected';
$(uiTabsSelected).removeClass(uiTabsSelected);
回答by Gert Grenander
What you're looking for is the selected option. E.g.
您正在寻找的是selected option。例如
$("#MyTabs").tabs({
selected: 2
});
回答by offner
Change this:
改变这个：
html.Append("$(\"#panelTabs\").tabs({selected: 2});");
To this:
对此：
html.Append("$(\"#panelTabs\").tabs('option','selected', 2);");
Edit: and...
编辑：和...
$(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');
}
});
});
回答by camainc
In case anyone else comes here looking for the answer, the current(as of this date) way to select a tab (jQuery UI 1.10) is to use the "active" option:
如果其他人来这里寻找答案，当前（截至目前）选择选项卡（jQuery UI 1.10）的方法是使用“活动”选项：
Initialize the tabs with the active option specified:
使用指定的活动选项初始化选项卡：
$( ".selector" ).tabs({ active: 1 });
回答by DEH
The solution was to add and remove classes, as ethagnawl suggested. The following C# shows both the UL being built, plus the required jQuery script injection. The important bit is in the show: function where the classes are being manipulated. It is this code that works around the problem.
正如 ethagnawl 建议的那样，解决方案是添加和删除类。以下 C# 显示了正在构建的 UL 以及所需的 jQuery 脚本注入。重要的一点是在 show: 操作类的函数中。正是这段代码解决了这个问题。
StringBuilder tabsLiteral = new StringBuilder();
tabsLiteral.Append("<ul>");
foreach (KeyValuePair<string, Tab> 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("<li" + tabClass + ">");
//tabsLiteral.Append("<li>");
// Note - the kvp.Value.URI determines what should happen when the Tab is clicked
tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>");
tabsLiteral.Append("</li>");
}
tabsLiteral.Append("</ul>");
_panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString()));
HtmlGenericControl ctl = new HtmlGenericControl();
StringBuilder html = new StringBuilder();
html.Append("<script type=\"text/javascript\">");
//html.Append("$(\"#panelTabs\").tabs('option','selected', 2);");
html.Append(@"$(function() {
$('#panelTabs').tabs({
select: function(event, ui) {
getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
},
show: function(event, ui) {
// You MUST set both 'ui-state-active' AND 'ui-tabs-selected' for tab UI to operate properly - if either are missing it doesn't work
$('.ui-tabs-selected').removeClass('ui-state-active').removeClass('ui-tabs-selected');
$(ui.tab).addClass('ui-state-active').addClass('ui-tabs-selected');
//$('#panelTabs').tabs('selected',idx); // WOULD have been nice if this had worked, but UI does not keep up
}
});
});");
html.Append("</script>");
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
