jQuery UI Tabs - как получить выбранный индекс вкладки

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

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, то .находить.'(ui-tabs-панель: нет(.ui-tabs-hide)'), вам будет легко сделать это для выбранных вкладок в кадрах. Помните, что jQuery уже сделал всю тяжелую работу, не нужно изобретать колесо!

просто расширить (обновить)

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

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

$('#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.индекс.

когда вы пытаетесь получить доступ к объекту ui? пользовательский интерфейс будет не определен, если вы попытаетесь получить к нему доступ за пределами события 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, равный нажатой вкладке.

однако это кажется слишком сложным, если все, что вам нужно, это индекс. пользовательский интерфейс.индекс из события или $("#TabList").вешалки.)(data ("selected.вкладки") вне события должно быть все, что вам нужно.

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

это изменилось с версии 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, вы можете заметить, что это невозможно. The 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');

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

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

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

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 предназначен для навигации, связанной с and .ui-tabs-panel связано с вкладкой content panel. в этой ссылке демо в jQuery ui сайте вы увидите это класс используется - http://jqueryui.com/tabs/#manipulation

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

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

и для индекса

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

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

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

простой

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

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

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

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

Я нашел, что код ниже делает трюк. Задает переменную вновь выбранной вкладки index

$("#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 текущей вкладки

скрытой переменной, как '<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) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});