Вкладки пользовательского интерфейса jQuery - Как получить индекс выбранной вкладки

Question

Я знаю, что этот конкретный вопрос задавался ранее , но я не получаю никаких результатов, используя событие bind() для плагина jQuery UI Tabs.

Мне просто нужно index новой выбранной вкладки, чтобы выполнить действие при нажатии на вкладку. bind() позволяет мне подключиться к событию select, но мой обычный метод получения текущей выбранной вкладки не работает. Возвращает ранее выбранный индекс вкладки, а не новый:

var selectedTab = $("#TabList").tabs().data("selected.tabs");

Вот код, который я пытаюсь использовать, чтобы получить выбранную в данный момент вкладку:

$("#TabList").bind("tabsselect", function(event, ui) {

});

Когда я использую этот код, объект пользовательского интерфейса возвращается undefined. Из документации это должен быть объект, который я использую для подключения к новому выбранному индексу с помощью ui.tab. Я пробовал это на начальном tabs() вызове, а также сам по себе. Я что-то здесь не так делаю?

Answer 1

Если вам нужно получить индекс вкладки вне контекста события вкладок, используйте это:

function getSelectedTabIndex() { 
    return $("#TabList").tabs('option', 'selected');
}

Обновление: С версии 1.9 «выбранный» изменен на «активный»

$("#TabList").tabs('option', 'active')

Answer 2

Для версий пользовательского интерфейса JQuery до 1.9 : ui.index из event - это то, что вам нужно.

Для JQuery UI 1.9 или новее : см. ответ Джорджо Лупарии, ниже.

Answer 3

ОБНОВЛЕНИЕ [ _{Вс 08/26/2012} ] Этот ответ стал настолько популярным, что я решил превратить его в полноценный блог / учебник
Пожалуйста, посетите Мой блог здесь , чтобы увидеть последние сведения о простом доступе к работе с вкладками в jQueryUI.
Также включен (в блоге) jsFiddle

---

¡¡¡Обновление! Обратите внимание: в более новых версиях jQueryUI (1.9+) ui-tabs-selected был заменен на ui-tabs-active. !!!

---

Я знаю, что эта ветка старая, но я не заметил упоминания о том, как получить «выбранную вкладку» (в настоящее время выпадающую панель) из другого места, кроме «вкладка событий». У меня есть простой способ ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

И чтобы легко получить индекс, конечно, есть путь, указанный на сайте ...

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

Тем не менее, вы можете использовать мой первый метод, чтобы получить индекс и все, что вы хотите об этой панели, довольно просто ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

PS. Если вы используете переменную iframe, то .find ('. Ui-tabs-panel: not (.ui-tabs-hide)'), вам будет легко это сделать и для выбранных вкладок в фреймах. Помните, jQuery уже проделал всю тяжелую работу, не нужно изобретать велосипед!

Просто расширить (обновлено)

Мне был задан вопрос: «Что, если в представлении есть несколько областей вкладок?» Опять же, просто подумайте, используйте мою ту же настройку, но используйте идентификатор, чтобы определить, какие вкладки вы хотите получить.

Например, если у вас есть:

$('#example-1').tabs();
$('#example-2').tabs();

И вы хотите, чтобы текущая панель второй вкладки была установлена:

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

А если вам нужна вкладка АКТУАЛЬНО, а не панель (очень просто, поэтому я не упоминал об этом раньше, но, полагаю, сейчас, просто чтобы быть внимательным)

// for page with only one set of tabs
var curTab = $('.ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

// for page with multiple sets of tabs
var curTab2 = $('#example-2 .ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

Опять же, помните, jQuery сделал всю тяжелую работу, не думайте так усердно.

Answer 4

Если вы используете JQuery UI версии 1.9.0 или выше, вы можете получить доступ к ui.newTab.index () внутри своей функции и получить то, что вам нужно.

Для более ранних версий используйте ui.index .

Answer 5

Когда вы пытаетесь получить доступ к объекту пользовательского интерфейса? Пользовательский интерфейс будет неопределенным, если вы попытаетесь получить к нему доступ вне события bind. Также, если эта строка

var selectedTab = $("#TabList").tabs().data("selected.tabs");

запускается в таком случае:

$("#TabList").bind("tabsselect", function(event, ui) {
  var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

selectedTab будет равно текущей вкладке в данный момент времени («предыдущей»). Это происходит потому, что событие tabsselect вызывается до того, как выбранная вкладка становится текущей вкладкой. Если вы все еще хотите сделать это таким образом, использование «tabsshow» вместо этого приведет к значению selectedTab, равному нажатой вкладке.

Однако, это кажется слишком сложным, если вам нужен только индекс. ui.index из события или $ ("# TabList"). tabs (). data ("selected.tabs") вне события - все, что вам нужно.

Answer 6

var $tabs = $('#tabs-menu').tabs();
// jquery ui 1.8
var selected = $tabs.tabs('option', 'selected');
// jquery ui 1.9+
var active = $tabs.tabs('option', 'active');

Answer 7

это изменилось с версией 1.9

что-то вроде

 $(document).ready(function () {
            $('#tabs').tabs({
                activate: function (event, ui) {
                    var act = $("#tabs").tabs("option", "active");
                    $("#<%= hidLastTab.ClientID %>").val(act);
                    //console.log($(ui.newTab));
                    //console.log($(ui.oldTab));
                }
            });

            if ($("#<%= hidLastTab.ClientID %>").val() != "") 
            {
                $("#tabs").tabs("option", "active", $("#<%= hidLastTab.ClientID %>").val());
            }


        });

следует использовать. Это работает нормально для меня; -)

Answer 8

В случае, если вы найдете активную вкладку Индекс, а затем укажите на активную вкладку

Сначала получите Активный индекс

var activeIndex = $("#panel").tabs('option', 'active');

Затем с помощью класса css получите панель содержимого вкладки

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex]; 

теперь обернул его в объект jQuery для дальнейшего использования

 var tabContent$ = $(element);

здесь я хочу добавить две информации, для которых класс .ui-tabs-nav предназначен для Навигации, связанной с, и .ui-tabs-panel связан с панелью содержимого вкладки. в этой демонстрационной ссылке на веб-сайте jquery ui вы увидите, что этот класс используется - http://jqueryui.com/tabs/#manipulation

Answer 9

Самый простой способ сделать это -

$("#tabs div[aria-hidden='false']");

и для индекса

$("#tabs div[aria-hidden='false']").index();

Answer 10

В случае, если кто-то пытался получить доступ к вкладкам из iframe, вы можете заметить, что это невозможно. div вкладки никогда не помечается как выбранные, как скрытые или не скрытые. Сама ссылка является единственной частью, помеченной как выбранная.

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus"><a href="#tabs-4">Tab 5</a></li>

Ниже приведено значение href ссылки, которое должно совпадать с идентификатором вашего контейнера вкладок:

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

Это также должно работать вместо: $tabs.tabs('option', 'selected');

Это лучше в том смысле, что вместо того, чтобы просто получить индекс вкладки, он дает вам фактический идентификатор вкладки.