Получить текущую вкладку на вкладках пользовательского интерфейса jQuery

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

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

Я пробовал:

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

Но я просто получаю предупреждение "undefined".

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

Спасибо

ОТВЕТЫ

Ответ 1

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

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

* Замените ".selector" на свой.

Затем active.attr( 'id' ) вернет именно то, что вам нужно.

Ответ 2

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

Ответ 3

Используйте в случае jQuery 1.9 +,

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

Предположим, что идентификатор контейнера ui tabs является tab-контейнером. Рабочий фрагмент

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

Протестировано с jQuery UI v1.11.2, jQuery v1.11.3 и Chrome 45.

Ответ 8

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

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

Ответ 9

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

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

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

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

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

$tab - ссылка на тело табуляции. Например, вы можете вызвать

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

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

Ответ 10

(Этот ответ важен для JQuery UI 1.12 и, вероятно, нескольких версий раньше.)

Это зависит от того, что вы подразумеваете под вкладкой... Существует то, что вы нажимаете, чтобы выбрать вкладку и панель, отображаемую из-за щелчка. То, что вы нажимаете, - это элемент списка <li>, содержащий тэг anchor <a> с атрибутом href, который указывает на идентификатор панели (он добавляется к "#" ). Значения id панели и href указаны вами (а не JQuery). Элемент списка по умолчанию не имеет идентификатора, но элемент привязки выполняет... он генерируется JQuery и будет чем-то вроде "ui-id-88". Чтобы получить идентификатор закладки, идентификатор привязки или идентификатор панели, вы можете использовать следующее:

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

Ответ 11

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

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

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