jQuery UI Tabs - Comment obtenir actuellement sélectionné Tab Index

si vous devez obtenir l'index de l'onglet en dehors du contexte d'un événement d'onglets, Utilisez ceci:

function getSelectedTabIndex() { 
    return $("#TabList").tabs('option', 'selected');
}

mise à jour: De la version 1.9, 'selected' est remplacé par 'active '

$("#TabList").tabs('option', 'active')

UPDATE [ _{Sun 08/26/2012} ] cette réponse est devenue si populaire que j'ai décidé d'en faire un blog à part entière / tutoriel

s'il vous Plaît visitez Mon Blog pour voir les dernières informations faciles d'accès à travailler avec des onglets dans jQueryUI

également inclus (dans le blog aussi) est un jsFiddle

¡¡¡ mise à jour! Veuillez noter: dans les versions plus récentes de jQueryUI (1.9+), ui-tabs-selected a été remplacé par ui-tabs-active . !!!

je sais que ce fil est vieux, mais quelque chose que je n'ai pas vu mentionné était la façon d'obtenir le "tab sélectionné" (actuellement tombé dans le panneau) ailleurs que le "tab events". J'ai une façon simple ...

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

et pour obtenir facilement l'index, bien sûr, il ya la façon indiquée sur le site ...

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

cependant, vous pouvez utiliser ma première méthode pour obtenir l'index et tout ce que vous voulez au sujet de ce panneau assez facile ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

PS. Si vous utilisez une variable iframe alors .trouver.'(ui-tabs-panneau:non(.ui-tabs-masquer les)'), vous trouverez qu'il est facile de faire cela pour les onglets sélectionnés dans des cadres. Souviens-toi, jQuery déjà fait tout le travail dur, pas besoin de réinventer la roue!

Juste pour élargir (mise à jour)

question a été soulevée à moi, " que se passe-t-il s'il y a plus d'un tabs zones sur la vue?" Encore une fois, pensez simplement, utilisez ma même configuration, mais utilisez un ID pour identifier les onglets que vous voulez mettre la main sur.

par exemple, si vous avez:

$('#example-1').tabs();
$('#example-2').tabs();

et vous voulez le panneau actuel du deuxième jeu d'onglets:

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

Et si vous voulez la tabulation et non le panneau (très facile, c'est pourquoi je ddn pas parler de cela avant, mais je suppose que je vais maintenant, pour être complet)

// for page with only one set of tabs
var curTab = $('.ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

// for page with multiple sets of tabs
var curTab2 = $('#example-2 .ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

encore une fois, rappelez-vous, jQuery a fait tout le travail, ne pensez pas si dur.

si vous utilisez JQuery UI version 1.9.0 ou plus, vous pouvez accéder à ui.newTab.index () dans votre fonction et obtenir ce que vous avez besoin.

Pour les versions antérieures d'utilisation de l'interface utilisateur.l'indice .

quand essayez-vous d'accéder à l'objet ui? l'interface utilisateur sera pas défini si vous essayez d'y accéder en dehors de la liaison de l'événement. En outre, si cette ligne

var selectedTab = $("#TabList").tabs().data("selected.tabs");

est couru dans l'événement comme ceci:

$("#TabList").bind("tabsselect", function(event, ui) {
  var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

selectedTab égale l'onglet courant à ce moment-là (le" précédent".) C'est parce que l'événement "tabsselect" est appelé avant que l'onglet cliqué ne devienne l'onglet courant. Si vous voulez toujours le faire de cette façon, en utilisant "tabsshow" à la place se traduira par selectedTab égalisant l'onglet cliqué.

cependant, cela semble trop complexe si tout ce que vous voulez est l'indice. interface.l'indice de l'intérieur de l'événement ou de l' $("#Tabliste").onglet.)(données ("sélectionnées.tabs") en dehors de l'événement devrait être tout ce dont vous avez besoin.

var $tabs = $('#tabs-menu').tabs();
// jquery ui 1.8
var selected = $tabs.tabs('option', 'selected');
// jquery ui 1.9+
var active = $tabs.tabs('option', 'active');

cela a changé avec la version 1.9

quelque chose comme

 $(document).ready(function () {
            $('#tabs').tabs({
                activate: function (event, ui) {
                    var act = $("#tabs").tabs("option", "active");
                    $("#<%= hidLastTab.ClientID %>").val(act);
                    //console.log($(ui.newTab));
                    //console.log($(ui.oldTab));
                }
            });

            if ($("#<%= hidLastTab.ClientID %>").val() != "") 
            {
                $("#tabs").tabs("option", "active", $("#<%= hidLastTab.ClientID %>").val());
            }


        });

doit être utilisé. Cela fonctionne bien pour moi ;-)

dans le cas où quelqu'un a essayé d'accéder aux onglets à partir d'un iframe, vous pouvez remarquer que ce n'est pas possible. Le div de l'onglet n'est jamais sélectionné, tout comme cachés ou masqués. Le lien lui-même est le seul morceau sélectionné.

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus"><a href="#tabs-4">Tab 5</a></li>

ce qui suit vous obtiendra la valeur href du lien qui devrait être le même que l'id pour votre conteneur onglet:

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

cela devrait également fonctionner à la place de: $tabs.tabs('option', 'selected');

C'est mieux dans ce sens qu'au lieu de simplement obtenir l'index de l'onglet, il vous donne l'id correspondant de l'onglet.

dans le cas où si vous trouvez L'index d'onglet actif et ensuite pointer à L'onglet actif

de la Première à obtenir l'index Actif

var activeIndex = $("#panel").tabs('option', 'active');

puis en utilisant la classe css obtenir l'onglet Panneau de contenu

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex]; 

maintenant enveloppé dans objet jQuery pour l'utiliser davantage

 var tabContent$ = $(element);

ici, je veux ajouter deux informations la classe .ui-tabs-nav est pour la Navigation associée à et .ui-tabs-panel est associée au contenu de l'onglet panneau. dans ce lien démo dans le site de jQuery ui vous verrez cette classe est utilisée - http://jqueryui.com/tabs/#manipulation

la façon la plus facile de faire ceci est

$("#tabs div[aria-hidden='false']");

et pour index

$("#tabs div[aria-hidden='false']").index();

$( "#tabs" ).tabs( "option", "active" )

alors vous aurez l'index de tab de 0

simple

essayez ce qui suit:

var $tabs = $('#tabs-menu').tabs();

var selected = $tabs.tabs('option', 'selected');

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;

j'ai trouvé que le code ci-dessous fait l'affaire. Définit une variable de l'onglet nouvellement sélectionné index

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});

Vous pouvez poster ci-dessous la réponse dans votre prochain post

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

une autre façon d'obtenir l'index de l'onglet sélectionné est:

var index = jQuery('#tabs').data('tabs').options.selected;

$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

dans la variable url , vous obtiendrez HREF / URL de l'onglet courant

prendre une variable cachée comme '<input type="hidden" id="sel_tab" name="sel_tab" value="" />' et sur chaque onglet onclick event écrire le code comme ...

<li><a href="#tabs-0" onclick="document.getElementById('sel_tab').value=0;" >TAB -1</a></li>
<li><a href="#tabs-1" onclick="document.getElementById('sel_tab').value=1;" >TAB -2</a></li>

vous pouvez obtenir la valeur de 'sel_tab' sur la page postée. :), simple !!!

si vous voulez vous assurer que ui.newTab.index() est disponible dans toutes les situations (onglets locaux et distants), alors appelez-le dans la fonction activer comme la documentation dit:

$("#tabs").tabs({
        activate: function(event, ui){
             alert(ui.newTab.index());
             // You can also use this to set another tab, see fiddle...
             // $("#other-tabs").tabs("option", "active", ui.newTab.index());                   
        },
});

http://jsfiddle.net/7v7n0v3j /

$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});