获取 jQuery UI 选项卡中的当前选项卡

Question

我在 jQuery UI 对话窗口中使用 jQuery UI 选项卡。

我遇到过一个实例，我需要在单击其中一个对话框按钮时找到当前选项卡的 id。查看由 jQuery UI 选项卡和对话框生成的 HTML，我真的找不到这样做的方法。保持选项卡的<ul> 元素距离对话框按钮组大约 3 个<div>。

我试过了：

$("#DialogBox").dialog({
    autoOpen: false,
    modal: true,
    buttons: [
        {
        text: "Save",
        click: function () {
        var currentTabId = $(this).closest("ul").attr("id");
        alert(currentTabId);

但我只是收到一个“未定义”的警报。

有没有办法做到这一点？

谢谢

Answer 1

//for getting selected tabs

var tabs = $("#tabs").children().find(".current").attr('href');

Answer 2

这是正确且最简单的一个：

var active = $(".tab-pane.active").attr("id");
console.log(active);

您应该在选项卡窗格旁边添加活动选择器。这将返回当前活动的标签 ID。

Answer 3

⚡以这种方式为我工作⚡

var currentTab=$("ul> .ui-tabs-active").attr('aria-controls');
console.log(currentTab);

Answer 4

（这个答案与 JQuery UI 1.12 和之前的几个版本有关。）

这取决于选项卡的含义...您单击以选择选项卡以及由于单击而显示的面板。您单击的内容是一个列表项<li>，其中包含一个锚点<a> 标记，该标记带有一个指向面板ID 的href 属性（它前面带有一个'#'）。面板 id 和 href 值由您设置（不是 JQuery）。默认情况下，列表项没有 id，但锚元素有……它是由 JQuery 生成的，类似于“ui-id-88”。要获取选项卡 ID、锚点 ID 或面板 ID，您可以使用以下命令：

// if you have nested tabs this might not work... in such case, give 
// your parent tab and panel a unique class and use it in selector
var $tabs = $("#tabs");
var tabIndex = $tabs.tabs("option", "active");
var $tab = $tabs.find("li[role=tab]").eq(tabIndex);
var tabId = $tab.attr("id"); // undefined unless set by user
var anchorId = $tab.attr("aria-labelledby"); // or $tabs.find("ul li a.ui-tabs-anchor").eq(tabIndex).attr("id");
var panelId = $tab.attr("aria-controls"); //or $tabs.find(".ui-tabs-panel").eq(tabIndex).attr("id");
// note: panelId will also be in href of anchor with prepended # sign
alert("tabId=" + tabId + ", anchorId=" + anchorId + ", panelId=" + panelId);

Answer 5

当您需要在 javascript 中选择活动选项卡时，使用 JQuery 3.1.1 和 Jquery UI 1.12.1 也可以使用此方法（“选择”是指在 JQuery 选择器中，而不是“选择”）选项卡处于活动状态，因为该选项卡当然已经处于活动状态）。

要获得对当前选定标签的引用，首先要获得对活动链接的引用（替换标签容器“myTabs”的 id）：

var $link = $('div[id=myTabs] ul .ui-tabs-active');

$link 的 id 是属性“aria-controls”中的选项卡：

var $tab = $('#' + $link.attr('aria-controls'));

$tab 是对选项卡主体的引用。例如，您可以调用

$tab.html('[html here]') 

填充或替换选项卡内容。

Answer 6

对我有用的是：

var current_tab = $("#tabs .ui-state-active a").attr('href');

Answer 7

假设 ui tabs container 的 id 是 tab-container。工作的sn-p是

$('#tab-container').find('>div:nth-of-type(' + ($('#tab-container').tabs("option", "active") + 1) + ')'); 

使用 jQuery UI v1.11.2、jQuery v1.11.3 和 Chrome 45 测试。

Answer 8

对于 JQuery UI 1.11+，这对我有用：

$("ul>.ui-tabs-active").attr('aria-controls');

Answer 9

在 jQuery 1.9+ 的情况下使用以下内容，

var currentTabId = $('div[id="mytabs"] ul .ui-tabs-active').attr("id");

Answer 10

根据手动http://api.jqueryui.com/tabs/活动JqueryUI选项卡的getter是

var active = $( ".selector" ).tabs( "option", "active" );

*用你的替换".selector"。

然后active.attr( 'id' ) 将返回您所需要的。

Answer 11

这对我有用（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');