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

Question

Sé que puedo obtener el índice de la pestaña actualmente seleccionada, pero de alguna manera puedo obtener la ID (el equivalente a ui.panel.id si esto fue desencadenado por un evento tab ... pero es no) 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

Puede utilizar el :visible pseudo-selector para apuntar el panel visible:

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

Vale la pena señalar que se puede recuperar la ficha activa de la activate event:

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

Answer 2

Como lo publiqué en una respuesta al this question, hay varias formas de lograr esto.

Por jQuery documents, que se proponen hacer lo siguiente para encontrar el índice de la ficha 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 ofrecen 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 Te voy a mostrar lo fácil que es hacer lo que quiera con la ficha 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 3

Si desea que el id (o en realidad el href) de la pestaña seleccionada , puede usar eq() para recuperar el Objeto jQuery.

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

Answer 4

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

Answer 5

Después de jQuery 1.9 seleccionada está en desuso

a fin de utilizar

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

Answer 6

respuesta de Jonathan Sampson ya no funciona. Intenta ...

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

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

Answer 7

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

Answer 8

Esto funciona:

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

Answer 9

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

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

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 se puede encontrar en la pestaña activa usando:

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