17

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

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

我试过了：

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

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

有没有办法做到这一点？

谢谢

4

11 回答 11

19

这对我有用（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');
于 2013-07-16T20:15:44.783 回答
15

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

var currentTabId = $('div[id="mytabs"] ul .ui-tabs-active').attr("id");
于 2013-11-27T15:02:39.673 回答
10

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

$("ul>.ui-tabs-active").attr('aria-controls');
于 2014-07-31T12:42:01.440 回答
5

⚡这样为我工作⚡</p> 

var currentTab=$("ul> .ui-tabs-active").attr('aria-controls');
console.log(currentTab);
于 2015-03-17T20:33:59.223 回答
5

这是正确的和最简单的：

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

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

于 2018-11-14T06:52:52.780 回答
3

根据手册http://api.jqueryui.com/tabs/活动 JqueryUI 选项卡的吸气剂是

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

*替换".selector"为您的。

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

于 2013-04-30T19:14:17.137 回答
3

对我有用的是：

var current_tab = $("#tabs .ui-state-active a").attr('href');
于 2016-05-30T12:47:39.330 回答
2 
//for getting selected tabs

var tabs = $("#tabs").children().find(".current").attr('href');
于 2016-03-24T05:02:21.710 回答
1

假设 ui tabs 容器的 id 是 tab-container。工作片段是

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

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

于 2015-09-11T05:09:53.520 回答
0

这也适用，使用 JQuery 3.1.1 和 Jquery UI 1.12.1，当您需要在 javascript 中选择您的活动选项卡时（通过“选择”我的意思是在 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]')

填充或替换选项卡内容。

于 2017-06-23T20:01:36.933 回答
0

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

这取决于选项卡的含义...您单击以选择选项卡和由于单击而显示的面板。您单击的内容是一个列表项<li>，其中包含一个带有指向面板 ID 的属性的锚<a>标记（它前面带有一个“#”）。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);
于 2017-10-06T23:22:34.827 回答