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

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

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

Обновление: Из версии 1.9 'selected' изменяется на 'active'

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

UPDATE [ _{Вс 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)');

И если вам нужна вкладка ACTUAL, а не панель (очень просто, поэтому я никогда не упоминал об этом раньше, но я полагаю, что теперь я просто буду тщательно)

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

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

запускается в следующем случае:

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

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

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

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


        });

. Это отлично работает для меня; -)

В случае, если вы найдете вкладку Active tab Index, а затем укажите вкладку Active Tab

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

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

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

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

то у вас будет указатель вкладки от 0

простой

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

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

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

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

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

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

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

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

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

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

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

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

Если вы хотите, чтобы 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/

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

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