получить текущую вкладку на вкладках jQuery UI

Я использую вкладки jQuery UI внутри диалогового окна jQuery UI.

я наткнулся на экземпляр, где мне нужно найти идентификатор текущей вкладке при нажатии на одну из кнопок диалоговых окон. Глядя на HTML, созданный вкладками jQuery UI и диалоговым окном, я не могу найти способ сделать это. The <ul> элементы, которые держат вкладку, составляют около 3 <div> ' s вдали от группы диалоговых кнопок.

пробовал:

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

но я просто получить "неопределенное" предупреждение назад.

есть ли способ сделать это?

спасибо

13
jquery jquery-ui jquery-ui-dialog jquery-ui-tabs

11 ответов

согласно руководству http://api.jqueryui.com/tabs/ геттер активной вкладки JqueryUI -

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

*заменить ".selector" на ваш один.

затем active.attr( 'id' ) будет возвращать именно то, что вам нужно.

0

Это то, что сработало для меня (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');
15

используйте следующее В случае jQuery 1.9+,

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

на jQuery UI 1.11+ это сработало для меня:

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

⚡ работал на меня таким образом ⚡

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

//для получения выбранных вкладок

var tabs = $("#tabs").дети.)(найти(".ток").attr ( 'href');

2

Asume, что идентификатор контейнера вкладок ui является 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.

1

что работал для меня было:

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

Это также работает, используя jQuery 3.1.1 и jQuery UI 1.12.1, когда вам нужно выбрать активную вкладку в javascript (под "выбрать" я имею в виду в селекторе jQuery, а не "выбрать" в смысле сделать вкладку активной, так как, конечно, вкладка уже активна).

чтобы получить ссылку на выбранную вкладку, сначала получите ссылку на активную ссылку (замените идентификатор контейнера вкладок "myTabs"):

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

$link имеет идентификатор вкладки в атрибуте "aria-controls":

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

$tab-это ссылка на тело вкладки. Например, вы можете вызвать 

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

для заполнения или замены содержимого вкладки.

0

(этот ответ актуален для jQuery UI 1.12 и, вероятно, несколько версий раньше.)

Это зависит от того, что вы подразумеваете под вкладку... Есть вещь, которую вы нажимаете, чтобы выбрать вкладку и панель, которая отображается из-за щелчка. Что вы щелкните элемент списка <li>, который содержит якорь <a> тег с href атрибут, который указывает на идентификатор панели (он добавляется с'#'). Значения ID панели и href устанавливаются вами (не JQuery). Элемент списка не имеет id by по умолчанию, но элемент 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);
0

вот один простой метод. 

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

это вернет текущий идентификатор вкладки.

-1