获取 jQuery UI 选项卡中的当前选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16302593/
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
get the current tab in jQuery UI tabs
提问by SkyeBoniwell
I am using jQuery UI Tabs inside of the jQuery UI dialog window.
我在 jQuery UI 对话框窗口中使用 jQuery UI 选项卡。
I've come across an instance, where I need to find the id of the current tab when clicking on one of the dialog buttons. Looking at the HTML generated by jQuery UI tabs and dialog, I can't really find a way of doing this. The <ul>elements that hold the tab, are about 3 <div>'s away from the group of dialog buttons.
我遇到过一个实例，当单击其中一个对话框按钮时，我需要找到当前选项卡的 id。查看由 jQuery UI 选项卡和对话框生成的 HTML，我真的找不到这样做的方法。<ul>包含选项卡的元素<div>距离对话框按钮组大约 3 's。
I tried:
我试过：
$("#DialogBox").dialog({
autoOpen: false,
modal: true,
buttons: [
{
text: "Save",
click: function () {
var currentTabId = $(this).closest("ul").attr("id");
alert(currentTabId);
But I just get an 'undefined' alert back.
但我只是收到一个“未定义”的警报。
Is there a way of doing this?
有没有办法做到这一点？
Thanks
谢谢
采纳答案by zeliboba
According to manual http://api.jqueryui.com/tabs/getter of active JqueryUI tab is
根据手册http://api.jqueryui.com/tabs/活动 JqueryUI 选项卡的 getter 是
var active = $( ".selector" ).tabs( "option", "active" );
*Replace ".selector"by your one.
*替换".selector"为你的。
Then active.attr( 'id' )will return exactly what you need.
然后active.attr( 'id' )将完全返回您需要的内容。
回答by Michael
This is what worked for me (jQuery 1.9, jQueryUI 1.10). I have not tested this for earlier versions of jQueryUI, but if you have jQueryUI 1.8 or earlier, instead of 'active' try using 'select'.
这对我有用（jQuery 1.9，jQueryUI 1.10）。我没有针对早期版本的 jQueryUI 测试过这个，但如果你有 jQueryUI 1.8 或更早版本，请尝试使用 'select' 而不是 'active'。
// GET INDEX OF ACTIVE TAB
// make sure to replace #tabs with the actual selector
// that you used to create the tabs
var activeTabIdx = $('#tabs').tabs('option','active');
// ID OF ACTIVE TAB
// make sure to change #tabs to your selector for tabs
var selector = '#tabs > ul > li';
var activeTabID = $(selector).eq(activeTabIdx).attr('id');
// ID OF ACTIVE TAB CONTENT
// make sure to change #tabs to your selector for tabs
var selector = '#tabs [id=ui-tabs-' + (activeTabIdx + 1) + ']';
var activeTabContentID = $(selector).attr('id');
回答by Santosh
Use following in case of jQuery 1.9+,
在 jQuery 1.9+ 的情况下使用以下，
var currentTabId = $('div[id="mytabs"] ul .ui-tabs-active').attr("id");
回答by maja
For JQuery UI 1.11+this worked for me:
对于JQuery UI 1.11+，这对我有用：
$("ul>.ui-tabs-active").attr('aria-controls');
回答by Rizerzero
? worked for me this way ?
? 以这种方式为我工作？
var currentTab=$("ul> .ui-tabs-active").attr('aria-controls');
console.log(currentTab);
回答by Marlon Ingal
here is the correct one and the simplest:
这是正确的，也是最简单的：
var active = $(".tab-pane.active").attr("id");
console.log(active);
You should add active selector next to tab-pane. This will return the current active tab ID.
您应该在选项卡窗格旁边添加活动选择器。这将返回当前活动选项卡 ID。
回答by trojan
What worked for me was:
对我有用的是：
var current_tab = $("#tabs .ui-state-active a").attr('href');
回答by saqib javaid
//for getting selected tabs
//获取选中的标签
var tabs = $("#tabs").children().find(".current").attr('href');
var tabs = $(" #tabs") .children().find(" .current").attr( 'href');
回答by userlond
Asume that ui tabs container's id is tab-container. Working snippet is
假设 ui tabs 容器的 id 是 tab-container。工作片段是
$('#tab-container').find('>div:nth-of-type(' + ($('#tab-container').tabs("option", "active") + 1) + ')');
Tested with jQuery UI v1.11.2, jQuery v1.11.3 and Chrome 45.
使用 jQuery UI v1.11.2、jQuery v1.11.3 和 Chrome 45 进行测试。
回答by Tom Regan
This also works, using JQuery 3.1.1 and Jquery UI 1.12.1, when you need to select your active tab in javascript (by "select" I mean in a JQuery selector, not "select" in the sense of making the tab active, since of course the tab is already active).
这也适用，使用 JQuery 3.1.1 和 Jquery UI 1.12.1，当您需要在 javascript 中选择活动选项卡时（“选择”我的意思是在 JQuery 选择器中，而不是在使选项卡处于活动状态的意义上的“选择” ，因为当然该选项卡已经处于活动状态）。
To get a reference to the currently selected tab, first get a reference to the active link (substitute the id of your tabs container "myTabs"):
要获取对当前选定选项卡的引用，首先获取对活动链接的引用（替换选项卡容器“myTabs”的 id）：
var $link = $('div[id=myTabs] ul .ui-tabs-active');
$link has the id the tab in the attribute "aria-controls":
$link 在属性“aria-controls”中具有选项卡的 ID：
var $tab = $('#' + $link.attr('aria-controls'));
$tab is a reference to the tab body. For example, you could call
$tab 是对选项卡正文的引用。例如，您可以调用
$tab.html('[html here]')
to fill or replace the tab content.
填充或替换选项卡内容。
