jQuery UI 选项卡。如何根据标签而不是索引选择标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5912762/
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 UI tabs. How to select a tab based on its id not based on index
提问by user695663
I have two tabs and configured usign jQuery UI.
我有两个选项卡并配置了使用 jQuery UI。
ul class="tabs"
li tabone
li tabtwo
ul
dynamically from C# code behind I will hide or select some tab let say tabtwo
and the other tab has to be hidden or not shown. I can do this in JavaScript using .tabs({selected:1});and .tabs(disable:0).but I don't want to use the tab indexes to do so.
从后面的 C# 代码动态地我将隐藏或选择一些选项卡让说 tabtwo 和另一个选项卡必须隐藏或不显示。我可以在 JavaScript 中使用.tabs({selected:1});and来做到这一点，.tabs(disable:0).但我不想使用标签索引来做到这一点。
Is there any alternate to select tabs based on their name/id?
是否有其他选项可以根据名称/ID 选择选项卡？
采纳答案by JasCav
Note: Due to changes made to jQuery 1.9 and jQuery UI, this answer is no longer the correct one. Please see @stankovski's answer below.
注意：由于对 jQuery 1.9 和 jQuery UI 所做的更改，此答案不再正确。请参阅下面@stankovski 的回答。
You need to find the tab's index first (which is just its position in a list) and then specifically select the tab using jQuery UI's provided select event (tabs->select).
您需要首先找到选项卡的索引（这只是它在列表中的位置），然后使用 jQuery UI 提供的选择事件（tabs->select）专门选择选项卡。
var index = $('#tabs ul').index($('#tabId'));
$('#tabs ul').tabs('select', index);
Update:BTW - I do realize that this is (ultimately) still selecting by index. But, it doesn't require that you know the specific position of the tabs (particularly when they are dynamically generated as asked in the question).
更新：顺便说一句 - 我确实意识到这（最终）仍在按索引选择。但是，它不需要您知道选项卡的具体位置（特别是当它们按照问题中的要求动态生成时）。
回答by stankovski
Accepted answer didn't work for me either, however I found solution in a similar thread: Switch to selected tab by name in Jquery-UI Tabs
接受的答案对我也不起作用，但是我在类似的线程中找到了解决方案： 在 Jquery-UI 选项卡中按名称切换到选定的选项卡
var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$('#tabs').tabs('select', index);
With jQuery UI >= 1.9:
使用 jQuery UI >= 1.9：
var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
回答by Garett
From the most recent document, the selectmethod takes an index or the id of the tab's panel (the href hash value). The documentation states:
从最近的文档中，select方法采用索引或选项卡面板的 id（href 哈希值）。该文件指出：
Select a tab, as if it were clicked. The second argument is the zero-based index of the tab to be selected or the id selector of the panel the tab is associated with (the tab's href fragment identifier, e.g. hash, points to the panel's id).
选择一个选项卡，就像它被点击一样。第二个参数是要选择的选项卡的从零开始的索引或与选项卡关联的面板的 id 选择器（选项卡的 href 片段标识符，例如哈希，指向面板的 id）。
So, given a layout like
所以，给定一个布局
<div id="myTabs">
<ul class="tabs">
<li><a href="#tabone">tabone</a></li>
<li><a href="#tabtwo">tabtwo</a></li>
</ul>
</div>
the following works
以下作品
$('#myTabs').tabs('select', '#tabtwo');
Here is an example.
这是一个例子。
UPDATE
更新
The above solution works in jQuery UI versions less than 1.9. For a solution in versions 1.9+ see @stankovski's answer.
上述解决方案适用于低于 1.9 的 jQuery UI 版本。有关 1.9+ 版本的解决方案，请参阅 @stankovski's answer。
回答by Torin Finnemann
It may have side effects if there are other listeners, and it doesn't feel as nice as interacting through the plugins API -- but it gives a less verbose code if you just "click" the tab, rather than count it's index and set it active afterwards, and it's pretty intuitive what's going on. Also it wont fail if the ui-guys decide to rename the option again.
如果有其他侦听器，它可能会产生副作用，并且感觉不如通过插件 API 进行交互那么好——但是如果您只是“单击”选项卡，而不是计算它的索引和设置，它会提供不那么冗长的代码它随后激活，并且非常直观地了解正在发生的事情。如果 ui-guys 决定再次重命名选项，它也不会失败。
$('#tabs').tabs();
$('#tabs a[href="#tabtwo"]').click();
It's intriguing, though, that the ui tabs code has a meta-function (_getIndex) with the comment:
不过，有趣的是，ui 选项卡代码有一个_getIndex带有注释的元函数 ( )：
"meta-function to give users option to provide a href string instead of a numerical index"
“元函数让用户可以选择提供 href 字符串而不是数字索引”
but does not use it when setting the active option, only when calling enable, disable and load.
但在设置 active 选项时不使用它，只有在调用 enable、disable 和 load 时才使用它。
回答by Sarbasish Mishra
Active 1st tab
活动的第一个选项卡
$("#workflowTab").tabs({ active: 0 });
$("#workflowTab").tabs({ active: 0 });
Active last tab
活动的最后一个选项卡
$("#workflowTab").tabs({ active: -1 });
$("#workflowTab").tabs({ active: -1 });
Active 2nd tab
活动的第二个选项卡
$("#workflowTab").tabs({ active: 1 });
$("#workflowTab").tabs({ active: 1 });
Its work like an array
它的工作就像一个数组
回答by JohnRDOrazio
Building on @stankovski's answer, a more precise way of doing it which will work for all use cases (for example, when a tab is loading via ajax and so the anchor's href attribute doesn't correspond with the hash), the id in any case will correspond with the li element's "aria-controls" attribute. So for example if you are trying to activate a tab based on the location.hash, which is set to the tab id, then it is better to look for "aria-controls" than for "href".
在@ stankovski的答案中建立一个更精确的方式，它将为所有用例工作（例如，当通过ajax加载时，anchor的href属性不对应哈希），ID中的ID case 将对应于 li 元素的“aria-controls”属性。因此，例如，如果您尝试根据设置为选项卡 ID 的 location.hash 激活选项卡，那么查找“aria-controls”比查找“href”更好。
With jQuery UI >= 1.9:
使用 jQuery UI >= 1.9：
var index = $('#tabs > ul > li[aria-controls="simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
In the case of setting and checking the url hash:
在设置和检查 url 哈希的情况下：
When creating the tabs, use the 'activate' event to set the location.hash to the panel id:
创建选项卡时，使用 'activate' 事件将 location.hash 设置为面板 ID：
$('#tabs').tabs({
activate: function(event, ui) {
var scrollTop = $(window).scrollTop(); // save current scroll position
window.location.hash = ui.newPanel.attr('id');
$(window).scrollTop(scrollTop); // keep scroll at current position
}
});
Then use the window hashchange event to compare the location.hash to the panel id (do this by looking for the li element's aria-controls attribute):
然后使用 window hashchange 事件将 location.hash 与面板 ID 进行比较（通过查找 li 元素的 aria-controls 属性来执行此操作）：
$(window).on('hashchange', function () {
if (!location.hash) {
$('#tabs').tabs('option', 'active', 0);
return;
}
$('#tabs > ul > li').each(function (index, li) {
if ('#' + $(li).attr('aria-controls') == location.hash) {
$('#tabs').tabs('option', 'active', index);
return;
}
});
});
This will handle all cases, even where tabs use ajax. Also if you have nested tabs, it isn't too difficult to handle that either using a little more logic.
这将处理所有情况，即使选项卡使用 ajax。此外，如果您有嵌套的选项卡，使用更多的逻辑来处理它并不太难。
回答by David Smyth
I found this works more easily than getting an index. For my needs, I am selecting a tab based off a url hash
我发现这比获取索引更容易。根据我的需要，我选择基于 url 哈希的选项卡
var target = window.location.hash.replace(/#/,'#tab-');
if (target) {
jQuery('a[href='+target+']').click().parent().trigger('keydown');
}
回答by daniel medina
This is the answer
这就是答案
var index = $('#tabs a[href="#simple-tab-2"]').parent().index();
$("#tabs").tabs("option", "active", index);
回答by Mohan Dere
As per UI Doc :
根据 UI 文档：
First get index of tab which you want to activate.
var index = $('#tabs a[href="'+id+'"]').parent().index();Activate it
tabs.tabs( "option", "active", index );
首先获取要激活的选项卡的索引。
var index = $('#tabs a[href="'+id+'"]').parent().index();激活它
tabs.tabs( "option", "active", index );
回答by Elisabeth
None of these answers worked for me. I just by-passed the problem. I did this:
这些答案都不适合我。我只是绕过了这个问题。我这样做了：
$('#tabs-tab1').removeClass('tabs-hide');
$('#tabs-tab2').addClass('tabs-hide');
$('#container-tabs a[href="#tabs-tab2"]').parent().removeClass('tabs-selected');
$('#container-tabs a[href="#tabs-tab1"]').parent().addClass('tabs-selected');
It works great.
它工作得很好。
