Pestañas jQuery UI - Cómo obtener el índice de pestañas seleccionado actualmente

Sé que esta pregunta específica se ha hecho antes , pero no obtengo ningún resultado al usar el bind()evento en el jQuery UI Tabscomplemento.

Solo necesito el indexde la pestaña recién seleccionada para realizar una acción cuando se hace clic en la pestaña. bind()me permite conectarme al evento select, pero mi método habitual para obtener la pestaña seleccionada actualmente no funciona. Devuelve el índice de pestaña seleccionado anteriormente, no el nuevo:

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

Aquí está el código que estoy intentando usar para obtener la pestaña seleccionada actualmente:

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

});

Cuando uso este código, el objeto ui vuelveundefined . De la documentación, este debería ser el objeto que estoy usando para conectarme al índice recién seleccionado usando ui.tab. He intentado esto en la tabs()llamada inicial y también por sí solo. ¿Estoy haciendo algo mal aquí?

Para las versiones de JQuery UI anteriores a la 1.9 : ui.indexdesde el eventes lo que desea.

Para JQuery UI 1.9 o posterior : consulte la respuesta de Giorgio Luparia, a continuación.

Si necesita obtener el índice de pestañas desde fuera del contexto de un evento de pestañas, use esto:

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

Actualización: de la versión 1.9, 'seleccionado' se cambia a 'activo'

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

ACTUALIZACIÓN [ _{Dom 26/08/2012} ] Esta respuesta se ha vuelto tan popular que decidí convertirla en un blog / tutorial completo.
Visite Mi blog aquí para ver lo último en información de fácil acceso para trabajar con pestañas en jQueryUI.
También incluido (en el blog también) es un jsFiddle

¡¡¡Actualización! Tenga en cuenta: en las versiones más recientes de jQueryUI (1.9+), ui-tabs-selectedse ha reemplazado por ui-tabs-active. !!!

Sé que este hilo es antiguo, pero algo que no vi mencionado fue cómo obtener la "pestaña seleccionada" (panel desplegable actualmente) desde otro lugar que no sea "eventos de pestaña". Tengo una forma sencilla ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

Y para obtener fácilmente el índice, por supuesto, existe la forma que figura en el sitio ...

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

Sin embargo, podría usar mi primer método para obtener el índice y cualquier cosa que desee sobre ese panel con bastante facilidad ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

PD. Si usa una variable iframe y luego .find ('. Ui-tabs-panel: not (.ui-tabs-hide)'), también le resultará fácil hacer esto para las pestañas seleccionadas en marcos. Recuerde, jQuery ya hizo todo el trabajo duro, ¡no es necesario reinventar la rueda!

Solo para expandir (actualizado)

Se me planteó la pregunta: "¿Qué pasa si hay más de un área de pestañas en la vista?" Una vez más, piense simple, use mi misma configuración pero use una ID para identificar qué pestañas desea obtener.

Por ejemplo, si tiene:

$('#example-1').tabs();
$('#example-2').tabs();

Y desea el panel actual del segundo conjunto de pestañas:

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

Y si quieres la pestaña ACTUAL y no el panel (realmente fácil, por eso no lo mencioné antes, pero supongo que lo haré ahora, solo para ser exhaustivo)

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

Una vez más, recuerde, jQuery hizo todo el trabajo duro, no lo piense tanto.

Si está utilizando JQuery UI versión 1.9.0 o superior, puede acceder a ui.newTab.index () dentro de su función y obtener lo que necesita.

Para versiones anteriores, use 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');

¿Cuándo intentas acceder al objeto ui? ui no estará definido si intenta acceder a él fuera del evento de vinculación. Además, si esta línea

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

se ejecuta en el evento como este:

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

selectedTab será igual a la pestaña actual en ese momento (la "anterior"). Esto se debe a que el evento "tabsselect" se llama antes de que la pestaña seleccionada se convierta en la pestaña actual. Si aún desea hacerlo de esta manera, usar "tabsshow" en su lugar resultará en selectedTab igual a la pestaña en la que se hizo clic.

Sin embargo, eso parece demasiado complejo si todo lo que desea es el índice. ui.index desde dentro del evento o $ ("# TabList"). tabs (). data ("selected.tabs") fuera del evento debería ser todo lo que necesita.

esto cambió con la versión 1.9

algo como

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


        });

debería ser usado. Esto está funcionando bien para mí ;-)

En caso de que alguien haya intentado acceder a las pestañas desde un iframe, es posible que note que no es posible. El divde la pestaña nunca se marca como seleccionado, solo como oculto o no oculto. El enlace en sí es la única pieza marcada como seleccionada.

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

A continuación, obtendrá el hrefvalor del enlace, que debería ser el mismo que el ID de su contenedor de pestañas:

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

Esto también debería funcionar en lugar de: $tabs.tabs('option', 'selected');

Es mejor en el sentido de que en lugar de simplemente obtener el índice de la pestaña, le da la identificación real de la pestaña.

la forma más sencilla de hacer esto es

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

y para el índice

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

En caso de que encuentre el índice de la pestaña activa y luego apunte a la pestaña activa

Primero obtenga el índice activo

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

Luego, usando la clase css, obtenga el panel de contenido de la pestaña

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex]; 

ahora envuelto en el objeto jQuery para usarlo más

 var tabContent$ = $(element);

aquí quiero agregar dos información con la que la clase .ui-tabs-naves para Navegación asociada y .ui-tabs-panelestá asociada con el panel de contenido de la pestaña. en este enlace de demostración en el sitio web de jquery ui, verá que se usa esta clase: http://jqueryui.com/tabs/#manipulation

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

entonces tendrás el índice de pestaña desde 0

sencillo

Intente lo siguiente:

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

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

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

Encontré que el siguiente código hace el truco. Establece una variable del índice de pestaña recién seleccionado

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

Puede publicar la respuesta a continuación en su próxima publicación

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

Otra forma de obtener el índice de pestañas seleccionado es:

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

En la variable url obtendrá el HREF / URL de la pestaña actual

Puede encontrarlo a través de:

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

tome una variable oculta como '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'y en el evento onclick de cada pestaña escriba un código como ...

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

puede obtener el valor de 'sel_tab' en la página publicada. :) , sencillo !!!

Si desea asegurarse de que ui.newTab.index()esté disponible en todas las situaciones (pestañas locales y remotas), llámelo en la función de activación como dice la documentación :

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