javascript - recargar - jquery tabs get active tab

Pestañas jQuery UI: cómo obtener el índice de pestaña seleccionado actualmente

Question

Sé que se ha preguntado esta pregunta específica anteriormente , pero no obtengo ningún resultado con el evento bind() en el complemento jQuery UI Tabs .

Solo necesito el index de 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 de obtener la pestaña actualmente seleccionada no funciona. Devuelve el índice de pestañas seleccionado previamente, no el nuevo:

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

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

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

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

Answer 1

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 la última 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-selected ha sido reemplazado por ui-tabs-active . !!!

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

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

Y para obtener fácilmente el índice, por supuesto, está el camino enumerado en el sitio ...

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

Sin embargo, podrías usar mi primer método para obtener el índice y todo lo que quieras sobre ese panel bastante fácil ...

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, entonces .find (''.ui-tabs-panel: not (.ui-tabs-hide)''), también le resultará fácil hacer esto para las pestañas seleccionadas en los marcos. Recuerde, jQuery ya hizo todo el trabajo duro, ¡no hay necesidad de reinventar la rueda!

Solo para expandir (actualizado)

La pregunta fue presentada a mí, "¿Qué pasa si hay más de una área de pestañas en la vista?" Nuevamente, solo piense de manera simple, use mi misma configuración pero use una ID para identificar qué pestañas quiere obtener.

Por ejemplo, si tiene:

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

Y desea que 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 ahora, solo para ser minucioso)

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

De nuevo, recuerda, jQuery hizo todo el trabajo duro, no pienses tan duro.

Answer 2

¿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 de esta manera:

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

selectedTab igualará la pestaña actual en ese punto en el tiempo (el "anterior"). Esto se debe a que se llama al evento "tabsselect" antes de que la pestaña en la que se hace clic se convierta en la pestaña actual. Si aún desea hacerlo de esta manera, usar "tabsshow" en su lugar dará como resultado que Tab seleccionado iguale la pestaña en la que se hace clic.

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

Answer 3

En caso de que alguien haya intentado acceder a pestañas dentro de un iframe, es posible que note que no es posible. El div de la pestaña nunca se marca como seleccionado, 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 valor href del enlace, que debe coincidir con el ID del 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 solo obtener el índice de la pestaña, le da la identificación real de la pestaña.

Answer 4

En caso de que encuentre Índice de pestañas activas y luego apunte a Pestaña activa

Primero obtén el índice Activo

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

Luego, usando la clase css obtén el panel de contenido de la pestaña

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

ahora lo envuelve en el objeto jQuery para usarlo aún más

 var tabContent$ = $(element);

Aquí quiero agregar dos información de la clase .ui-tabs-nav es para la navegación asociada con .ui-tabs-panel está asociado con el panel de contenido de pestañas. en este enlace demo en el sitio web de jquery ui, verá que se usa esta clase - http://jqueryui.com/tabs/#manipulation

Answer 5

Encontré que el código a continuación es el truco. Establece una variable del índice de pestañas recientemente seleccionado

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

Answer 6

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

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

Answer 7

Pruebe lo siguiente:

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

Answer 8

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

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

Answer 9

Si desea asegurarse de que ui.newTab.index() esté disponible en todas las situaciones (pestañas locales y remotas), ui.newTab.index() en la función de activación tal como lo indica la documentation :

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

Answer 10

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 .

Answer 11

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

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

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

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

Answer 12

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

Answer 13

la forma más fácil de hacerlo es

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

y para el índice

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

Answer 14

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

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

Answer 15

Para las versiones de JQuery UI anteriores a 1.9 : ui.index del event es lo que desea.

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

Answer 16

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

Answer 17

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

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

sencillo

Answer 18

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

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