web-dev-qa-db-fra.com

Obtenir l'ID de l'onglet (div) en cours d'activation

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>
jqueryjquery-uijquery-pluginsjquery-tabs
42
AlvaroV

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'));
  }
});
55
thenickdude
var $tabs = $("#tabs").tabs({
    select: function( evt, ui ) {
        $("#current").text( $(ui.tab).attr('href'));
    }
})

[~ # ~] update [~ # ~] - 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émo jsFiddle

22
MuhammadHani

Ça marche pour moi

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

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

2
Pitchai P
var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);
1
Nikhil Raj k

Examinez l'objet d'événement JQueryUI (utilisez un débogueur de navigateur tel que Mozilla Firebug ou 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)
    }
});
1
wildbill

Je suppose que vous voulez savoir quel onglet est activé et exécuter différentes actions en fonction de celle-ci.

Plutôt que de récupérer les identifiants et les attributs à partir des éléments HTML, voici comment procéder:

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

L'événement d'activation n'est pas appelé lorsque les onglets sont créés. Pour cela, vous devez ajouter l’événement "tabscreate" dans le mix, mais vous avez l’idée.

1
MoonStom

Ça marche pour moi

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

À mon avis, le moyen le plus simple consiste à ajouter data- Au <li ...> Constituant les onglets.

Par exemple:

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

Puis gérez l’événement beforeActivate (s’il s’agit de l’événement que vous regardez):

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

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

Par exemple, $(n).data("tabname") renverrait le nom de l'onglet. Cela vous permet également d'ajouter toute autre information nécessaire aux onglets. Solution simpliste et évolutive je crois.

0
Michael

Utiliser aria-controls

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

Le moyen le plus simple que j'ai trouvé est:

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

Cela retournera l'ID du div qui est actif. N'oubliez pas que vous devez remplacer #tabs par votre ID jquery.tabs.

0
Frank