tab - Necesita identificación de pestaña seleccionada actualmente para las pestañas jQuery

tabs javascript

Question

Sé que puedo obtener el índice de la pestaña actualmente seleccionada, pero de alguna manera puedo acceder a la ID (el equivalente de ui.panel.id si esto fue desencadenado por un evento tab ... pero no lo es) de la pestaña actualmente seleccionada ? Preferiría no usar el índice porque el orden de las pestañas podría cambiar. Prefiero no usar las marcas de estilo, ya que pueden cambiar en versiones futuras. ¿Hay un método para esto? Si no, ¿puedo de alguna manera usar el índice para acceder a esto (tal vez incluso accediendo primero al objeto del panel)? ¿Alguna otra idea?

Answer 1

La respuesta de Jonathan Sampson ya no funciona. Tratar...

$("#tabs .ui-tabs-panel:visible").attr("id");

jsFiddle: http://jsfiddle.net/tbEq6/

Answer 2

Si desea la id (o realmente la href ) de la pestaña seleccionada, puede usar eq() para recuperar el objeto jQuery.

Puede ver un ejemplo aquí: http://jsfiddle.net/svierkant/hpU3T/1/

Answer 3

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

Answer 4

Después de que JQuery 1.9 seleccionado esté en desuso

Entonces usa

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

Answer 5

$("#tabs .ui-state-active a").attr("id");

Answer 6

Esto funciona:

$(''#divName .ui-tabs-panel[aria-hidden="false"]'').prop(''id'');

Answer 7

Puede usar el pseudo-selector visible para apuntar al panel visible:

$("#tabs .ui-tabs-panel:visible").attr("id");

Vale la pena señalar que puede recuperar la pestaña activa del evento activate :

$("#tabs").tabs({
activate: function (event, ui) {
console.log(ui.newPanel[0].id);
}
});

Answer 8

Para jQuery UI> = 1.9 puede usar ui.newPanel.selector :

$(''#tabs'').on(''tabactivate'', function(event, ui) {
console.log(ui.newPanel.selector);
});

Answer 9

Como publiqué en una respuesta a esta pregunta , hay varias formas de lograr esto.

En los documentos de jQuery , proponen hacer lo siguiente para encontrar el índice de la pestaña actualmente abierta:

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

Sin embargo, esto no es práctico si necesita hacer mucho con esa pestaña. Por qué aún no proporcionan una solución más práctica para obtener el elemento real, no estoy seguro, sin embargo, mediante el uso de jQuery hay una solución fácil que puede crear usted mismo.

En el siguiente código, le mostraré lo fácil que es hacer lo que quiera con la pestaña actual:

var curTab = $(''.ui-tabs-panel:not(.ui-tabs-hide)''),
curTabIndex = curTab.index(), // will get you the index number of where it sits
curTabID = curTab.prop("id"), // will give you the id of the tab open if existant
curTabCls = curTab.attr("class"); // will give you an array of classes on this tab
// etc ....
// now, if you wanted a little more depth, for instance specific tabs area (if you have multiple tabs on your page) you can do simply add to your selector statement
var curTab = $(''#myTabs_1 .ui-tabs-panel:not(.ui-tabs-hide)'');
// then you can make simple calls to that tab and get whatever data or manipulate it how you please
curTab.css("background-color", "#FFF");

Answer 10

Para la versión de jquery debajo de 1.9:

 <div class="roundedFloatmenu">
<ul id="unid">
<li class="titleHover" id="li_search">Search</li>
<li class="titleHover" id="li_notes">Notes</li>
<li class="titleHover active" id="li_writeback">Writeback</li>
<li class="titleHover" id="li_attorney">Attorney</li>
</ul>
</div 

Y puedes encontrar la pestaña activa usando:

 jQuery(''#unid'').find(''li.active'').attr(''id'')