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

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

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

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

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

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

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

ОБНОВЛЕНИЕ [_{Вс, 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 ....

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 проделал всю тяжелую работу, не думайте так усердно.

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

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

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

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") вне события должно быть всем, что вам нужно.

это изменилось с версией 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());
            }


        });

должен быть использован. У меня это отлично работает ;-)

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

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

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

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

и для индекса

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

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

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

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

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

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

просто

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете найти его через:

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});

возьмите скрытую переменную, например '<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' на опубликованной странице. :) , просто !!!

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

$("#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/