需要当前为 jQuery 选项卡选择的选项卡 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1864219/
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
Need currently selected tab ID for jQuery tabs
提问by ejf
I know I can get the index of the currently selected tab but can I somehow get to the ID (the equivalent of the ui.panel.idif this were triggered by an tab event...but it's not) of the currently selected tab? I'd prefer not to use the index because ordering of the tabs might change. I prefer not to use the style markups as those may change in future releases. Is there a method for this? If not, can I somehow use the index to access this (maybe even by accessing the panel object first)? Any other ideas?
我知道我可以获得当前选定选项卡的索引，但我可以以某种方式获得当前选定选项卡的 ID（相当于ui.panel.id如果这是由选项卡事件触发的...但它不是）？我不想使用索引，因为选项卡的顺序可能会改变。我不喜欢使用样式标记，因为这些标记可能会在未来版本中发生变化。有没有办法做到这一点？如果没有，我能否以某种方式使用索引来访问它（甚至可以先访问面板对象）？还有其他想法吗？
回答by Sampson
You can use the :visiblepseudo-selectorto target the visible panel:
您可以使用:visible伪选择器来定位可见面板：
$("#tabs .ui-tabs-panel:visible").attr("id");
It's worth noting that you can retrieve the active tab from the activateevent:
值得注意的是，您可以从activate事件中检索活动选项卡：
$("#tabs").tabs({
activate: function (event, ui) {
console.log(ui.newPanel[0].id);
}
});
回答by Homer
Jonathan Sampson's answer doesn't work anymore. Try...
乔纳森桑普森的回答不再有效。尝试...
$("#tabs .ui-tabs-panel:visible").attr("id");
$("#tabs .ui-tabs-panel:visible").attr("id");
jsFiddle: http://jsfiddle.net/tbEq6/
jsFiddle：http: //jsfiddle.net/tbEq6/
回答by Stephan Vierkant
If you want the id(or actually the href) from the selected tab, you can use eq()to retrieve the jQuery Object.
如果您想要id（或实际上是href）所选选项卡，您可以使用eq()来检索 jQuery 对象。
You can see an example here: http://jsfiddle.net/svierkant/hpU3T/1/
你可以在这里看到一个例子：http: //jsfiddle.net/svierkant/hpU3T/1/
回答by SpYk3HH
As I posted in an answer to this question, there are several ways to achieve this.
正如我在这个问题的回答中发布的那样，有几种方法可以实现这一点。
On the jQuery documents, they propose to do the following to find the index of the currently open tab:
在jQuery 文档上，他们建议执行以下操作来查找当前打开的选项卡的索引：
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
However, this is impractical if you need to do a lot with that tab. Why they don't yet provide a more practical solution of getting the actual element, I'm unsure, however, through use of jQuery there is an easy solution you can create yourself.
但是，如果您需要对该选项卡执行大量操作，这是不切实际的。为什么他们还没有提供获取实际元素的更实用的解决方案，我不确定，但是，通过使用 jQuery，您可以自己创建一个简单的解决方案。
In the following code i'll show you just how easy it is to do anything you want with the current tab:
在下面的代码中，我将向您展示使用当前选项卡执行任何您想做的事情是多么容易：
var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
curTabIndex = curTab.index(), // will get you the index number of where it sits
curTabID = curTab.prop("id"), // will give you the id of the tab open if existant
curTabCls = curTab.attr("class"); // will give you an array of classes on this tab
// etc ....
// now, if you wanted a little more depth, for instance specific tabs area (if you have multiple tabs on your page) you can do simply add to your selector statement
var curTab = $('#myTabs_1 .ui-tabs-panel:not(.ui-tabs-hide)');
// then you can make simple calls to that tab and get whatever data or manipulate it how you please
curTab.css("background-color", "#FFF");
回答by Manjesh V
After JQuery 1.9 selected is deprecated
不推荐使用 JQuery 1.9 之后
So use
所以用
var active = $( "#jtabs" ).tabs( "option", "active" );
var active = $( "#jtabs" ).tabs( "option", "active" );
回答by Yoosaf Abdulla
For jquery version below 1.9:
对于低于 1.9 的 jquery 版本：
<div class="roundedFloatmenu">
<ul id="unid">
<li class="titleHover" id="li_search">Search</li>
<li class="titleHover" id="li_notes">Notes</li>
<li class="titleHover active" id="li_writeback">Writeback</li>
<li class="titleHover" id="li_attorney">Attorney</li>
</ul>
</div
And you can find the active tab using:
您可以使用以下方法找到活动选项卡：
jQuery('#unid').find('li.active').attr('id')
回答by krunal chavda
This works:
这有效：
$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');
回答by Kevin Qi
For jQuery UI >= 1.9 you can use ui.newPanel.selector:
对于 jQuery UI >= 1.9，您可以使用ui.newPanel.selector：
$('#tabs').on('tabactivate', function(event, ui) {
console.log(ui.newPanel.selector);
});
回答by abg
var curTab = $jQuery('#tabs .ui-tabs-panel:not(.ui-tabs-hide)').attr('id');
回答by Chander Shekhar
$("#tabs .ui-state-active a").attr("id");
