ejemplo - jquery prop

Obtener el ID de la pestaña(div) que se activa

Question

Estoy usando jquery 1.9 y jquery UI 1.10

Quiero poder obtener la ID de pestaña al hacer clic en una pestaña. Por ejemplo, si hago clic en la pestaña llamada "Segundo", quiero obtener la respuesta "tabs-2".

He hecho el siguiente código hasta el momento:

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            beforeActivate: function (event, ui) {
                alert(/* the id of the tab (div) being activated */);
            }
        });
    });
</script>

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">First</a></li>
       <li><a href="#tabs-2">Second</a></li>
    </ul>
    <div id="tabs-1">
        <p>abcde</p>
    </div>
    <div id="tabs-2">
        <p>fghi</p>
    </div>
</div> 

Answer 1

En mi opinión, la forma más fácil es agregar data- a los <li ...> que componen las pestañas.

Por ejemplo:

                <li data-index="2" data-tabname="Notes">
                  <a href="#tabs-Employee-Notes">Notes</a>
                </li>

Luego maneje el evento beforeActivate (si ese es el evento que está mirando):

$("#jqTabs_EmployeeDetails").tabs({
    heightStyle: "fill",
    beforeActivate: function (event, ui) {
        var n = ui.newTab;

        console.log($(n).data());
    }
});

Por ejemplo, $(n).data("tabname" ) devolvería el nombre de la pestaña. Esto también le permite agregar cualquier otra información que necesite a las pestañas. Solución simplista y escalable, creo.

Answer 2

Esto funciona para mí

$( "#editor_tabs" ).tabs( { 
    activate: function ( event, ui ) {
        $(ui.newTab.find("a").attr("href")).html("Got It");
    }
});

Answer 3

Esto funciona para mi

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

Answer 4

Examine el objeto de evento JQueryUI (use un depurador de navegador como Firebug de Mozilla o herramientas de desarrollador de Chrome).

$("#tabs").tabs({        
    activate: function( event, ui ) { 
        console.log(event)  //unnecessary, but it''s how to look at the event object              
        alert(event.currentTarget.hash)
    }
});

Answer 5

La forma más fácil que encontré es:

$(''#tabs .ui-state-active'').attr(''aria-controls'')

Esto devolverá la ID de la bruja div activa. Recuerde que debe cambiar los #tabs a su ID de jquery.tabs.

Answer 6

Probado y trabajando con JQueryUI 1.10, cómo obtener el ID de la pestaña tal como está seleccionada:

$("#tabs").tabs({
  beforeActivate: function (event, ui) {
    alert(ui.newPanel.attr(''id''));
  }
});

Answer 7

Si desea obtener algo al hacer clic en la pestaña, use el evento select.

$(''#tabs'').tabs({
  beforeActivate: function(event, ui){
     alert($(ui.tab).attr(''href''));
 }
 });

EDITAR

Se cambió ''seleccionar'' a ''antes de Activar'' ya que se eliminó de la versión 1.10

Answer 8

Supongo que quiere saber qué pestaña se activa y, en base a eso, ejecutar varias acciones.

En lugar de buscar identificadores y atributos de los elementos HTML, aquí es cómo lo hace:

$("#tabs").on("tabsactivate", (event, ui) => {
    if (ui.newPanel.is("#tabs-1")){
        //first tab activated
    }
    else{
        //second tab activated
    }
});

El evento de activación no se llama cuando se crean las pestañas. Para eso, necesitarías agregar el evento "tabscreate" en la mezcla, pero entiendes la idea.

Answer 9

Usa aria-controls

alert(ui.newTab.attr("aria-controls"));

Answer 10

var $tabs = $("#tabs").tabs({
    select: function( evt, ui ) {
        $("#current").text( $(ui.tab).attr(''href''));
    }
})

ACTUALIZACIÓN - Otra solución para jquery UI 1.10

    $(function () { $(''#tabs'').tabs({ 
             activate: function (event, ui) {
             var active = $("#tabs").tabs("option", "active");
             alert($("#tabs ul>li a").eq(active).attr(''href'')); 
     } 
}); 

Demostración jsFiddle actualizada

Answer 11

var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);