jQuery ui tabs: récupère l'id de l'onglet (div) activé

Question

J'utilise jquery 1.9 et jquery UI 1.10

Je veux pouvoir obtenir l'ID de l'onglet en cliquant sur un onglet. Par exemple, si j'ai cliqué sur l'onglet nommé "Deuxième", je souhaite obtenir une réponse "onglets-2".

J'ai fait le code ci-dessous jusqu'à présent:

 <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

Testé et travaillant avec JQueryUI 1.10, comment obtenir l'ID de l'onglet tel qu'il est sélectionné:

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

Answer 2

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

MISE À JOUR - Une autre solution pour 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')); 
     } 
}); 
 

Mise à jour de la démonstration jsFiddle

Answer 3

Ça marche pour moi

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

Answer 4

Si vous voulez obtenir quelque chose en cliquant sur l'onglet, utilisez l'événement select.

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

MODIFIER

Changé 'select' à 'beforeActivate' car il a été supprimé de la version 1.10

Answer 5

Utiliser aria-controls

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