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

Question

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

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

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

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

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

});

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

Answer 1

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

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

Answer 2

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

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

Обновлять:В версии 1.9 слово «выбрано» заменено на «активно».

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

Answer 3

ОБНОВЛЯТЬ [_{Вс 26.08.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 ....

ПС.Если вы используете переменную 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 будет равен текущей вкладке в тот момент времени (" предыдущий " one.) Это потому, что " tabsselect " событие вызывается до того, как выбранная вкладка становится текущей вкладкой. Если вы все еще хотите сделать это таким образом, используйте & Quot; tabsshow & Quot; вместо этого получится, что 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

Если кто-то попытался получить доступ к вкладкам из 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');

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

Answer 9

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

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

и для индекса

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

Answer 10

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

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

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 11

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

тогда у вас будет индекс вкладки от 0

простой

Answer 12

Попробуйте сделать следующее:

var $tabs = $('#tabs-menu').tabs();

var selected = $tabs.tabs('option', 'selected');

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;

Answer 13

Я нашел код ниже, делает свое дело. Устанавливает переменную индекса новой выбранной вкладки

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});

Answer 14

Вы можете опубликовать ответ ниже в своем следующем сообщении

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

Answer 15

Другой способ получить индекс выбранной вкладки:

var index = jQuery('#tabs').data('tabs').options.selected;

Answer 16

$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

в URL переменной вы получите HREF/URL текущей вкладки

Answer 17

возьмите скрытую переменную, например '<input type="hidden" id="sel_tab" name="sel_tab" value="" />' и в событии onclick каждой вкладки напишите код, например...

<li><a href="#tabs-0" onclick="document.getElementById('sel_tab').value=0;" >TAB -1</a></li>
<li><a href="#tabs-1" onclick="document.getElementById('sel_tab').value=1;" >TAB -2</a></li>

вы можете получить значение «sel_tab» на опубликованной странице.:) , простой !!!

Answer 18

Если вы хотите убедиться, что ui.newTab.index() доступен во всех ситуациях (локальные и удаленные вкладки), то вызовите его в функции activ как документация гласит:

$("#tabs").tabs({
        activate: function(event, ui){
             alert(ui.newTab.index());
             // You can also use this to set another tab, see fiddle...
             // $("#other-tabs").tabs("option", "active", ui.newTab.index());                   
        },
});

http://jsfiddle.net/7v7n0v3j/

Answer 19

$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});