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

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

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

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

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

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

});

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

Для версий JQuery UI до 1.9 : ui.indexот того event, что вы хотите.

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

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

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

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

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

И если вам нужна вкладка ФАКТИЧЕСКАЯ, а не панель (очень просто, поэтому я не упоминал об этом раньше, но я полагаю, что сейчас, просто чтобы быть внимательным)

// 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 .

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

Когда вы пытаетесь получить доступ к объекту пользовательского интерфейса? 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();

В случае, если вы найдете 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

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

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