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

这对我有用（jQuery 1.9，jQueryUI 1.10）。我没有为早期版本的jQueryUI测试过这个，但如果你有jQueryUI 1.8或更早版本，而不是'active'尝试使用'select'。

// 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');

Answer 2

在jQuery 1.9 +，

的情况下使用以下内容

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

Answer 3

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

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

Answer 4

this以这种方式为我工作⚡

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

Answer 5

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

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

*替换".selector"。

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

Answer 6

//获取选定的标签

var tabs = $（“ #tabs ”）。children（）。find（“ .current ”）。attr（'href'）;

Answer 7

对我有用的是：

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

Answer 8

这是正确的，也是最简单的：

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

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

Answer 9

当你需要在javascript中选择你的活动标签时，这也可以使用JQuery 3.1.1和Jquery UI 1.12.1（通过“select”我的意思是在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 10

（这个答案与JQuery UI 1.12有关，之前可能还有几个版本。）

这取决于您对标签的含义...您可以单击以选择标签和由于单击而显示的面板。您点击的是一个列表项<li>，其中包含一个<a>标记的锚href标记，该标记指向面板ID（前面带有'＃'）。面板id和href值由您设置（而不是JQuery）。列表项默认没有id，但是anchor元素确实...它是由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 11

这是一个简单的方法。

 var id = $(".tab-pane").attr("id");                   
 alert(id);

这将返回当前标签ID。

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

11 个答案: