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-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.индекс.

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

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, вы можете заметить, что это невозможно. Элемент 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 связано с панелью содержимого вкладки. в этой ссылке демо на сайте 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;

Я нашел код ниже делает трюк. Задает переменную вновь выбранного индекса вкладки

$("#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
    }
});