jQuery UI Tabs - Como obter o índice das guias selecionadas no momento

Eu sei que essa pergunta específica já foi feita antes , mas não estou obtendo nenhum resultado usando o bind()evento no jQuery UI Tabsplugin.

Eu só preciso da indexguia recém-selecionada para executar uma ação quando a guia for clicada. bind()permite que eu me conecte ao evento select, mas meu método usual de obter a guia atualmente selecionada não funciona. Ele retorna o índice da guia selecionada anteriormente, não o novo:

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

Aqui está o código que estou tentando usar para obter a guia atualmente selecionada:

$("#TabList").bind("tabsselect", function(event, ui) {

});

Quando eu uso esse código, o objeto ui voltaundefined . Pela documentação, este deve ser o objeto que estou usando para conectar ao índice recém-selecionado usando ui.tab. Eu tentei isso na tabs()ligação inicial e também por conta própria. Estou fazendo algo errado aqui?

Para versões JQuery UI anteriores a 1.9 : ui.indexdo eventé o que você deseja.

Para JQuery UI 1.9 ou posterior : veja a resposta de Giorgio Luparia, abaixo.

Se você precisar obter o índice de tabulação de fora do contexto de um evento tabs, use isto:

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

Atualização: A partir da versão 1.9 'selecionado' é alterado para 'ativo'

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

ATUALIZAÇÃO [ _{Sun 2012/08/26} ] Esta resposta tornou-se tão popular que eu decidi fazê-lo em um blog de pleno direito / tutorial
Visite meu blog aqui para ver o mais recente em informações de acesso fácil de trabalhar com abas em jQueryUI
Também incluídos (no blog também) é um jsFiddle

¡¡¡Atualização! Observação: nas versões mais recentes do jQueryUI (1.9+), ui-tabs-selectedfoi substituído por ui-tabs-active. !!!

Eu sei que este tópico é antigo, mas algo que não vi mencionado foi como obter a "guia selecionada" (painel atualmente suspenso) de algum lugar diferente dos "eventos da guia". Eu tenho uma maneira simples ...

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

E para obter facilmente o índice, claro que existe a forma listada no site ...

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

No entanto, você poderia usar meu primeiro método para obter o índice e qualquer coisa que quiser sobre esse painel muito fácil ...

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

PS. Se você usar uma variável iframe então .find ('. Ui-tabs-panel: not (.ui-tabs-hide)'), você achará fácil fazer isso também para as guias selecionadas nos quadros. Lembre-se, jQuery já fez todo o trabalho duro, não há necessidade de reinventar a roda!

Apenas para expandir (atualizado)

A pergunta que me foi apresentada: "E se houver mais de uma área de guias na visualização?" Novamente, pense de forma simples, use minha mesma configuração, mas use um ID para identificar quais guias você deseja acessar.

Por exemplo, se você tem:

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

E você quer o painel atual do segundo conjunto de guias:

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

E se você quiser a guia ACTUAL e não o painel (muito fácil, é por isso que eu não mencionei antes, mas suponho que vou agora, apenas para ser mais completo)

// 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+

Novamente, lembre-se, jQuery fez todo o trabalho duro, não pense muito.

Se estiver usando JQuery UI versão 1.9.0 ou superior, você pode acessar ui.newTab.index () dentro de sua função e obter o que precisa.

Para versões anteriores, use ui.index .

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');

Quando você está tentando acessar o objeto IU? ui será indefinido se você tentar acessá-lo fora do evento de ligação. Além disso, se esta linha

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

é executado no evento assim:

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

selectedTab será igual à guia atual naquele ponto no tempo (a "anterior".) Isso ocorre porque o evento "tabsselect" é chamado antes que a guia clicada se torne a guia atual. Se você ainda quiser fazer dessa forma, usar "tabsshow" resultará em selectedTab igualando-se à guia clicada.

No entanto, isso parece muito complexo se tudo o que você deseja é o índice. ui.index de dentro do evento ou $ ("# TabList"). tabs (). data ("selected.tabs") fora do evento deve ser tudo o que você precisa.

isso mudou com a versão 1.9

algo como

 $(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());
            }


        });

deve ser usado. Isso está funcionando bem para mim ;-)

Caso alguém tenha tentado acessar as guias de um iframe, você perceberá que não é possível. O divda guia nunca é marcado como selecionado, apenas como oculto ou não oculto. O link em si é a única peça marcada como selecionada.

<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>

A seguir, você obterá o hrefvalor do link, que deve ser igual ao id do contêiner da guia:

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

Isso também deve funcionar no lugar de: $tabs.tabs('option', 'selected');

É melhor no sentido de que em vez de apenas obter o índice da guia, ele fornece a id real da guia.

a maneira mais fácil de fazer isso é

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

e para índice

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

Caso você encontre Índice da guia Ativa e aponte para Guia Ativa

Primeiro obtenha o índice ativo

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

Então, usando a classe css, obtenha o painel de conteúdo da guia

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

agora embrulhado em objeto jQuery para usá-lo posteriormente

 var tabContent$ = $(element);

aqui eu quero adicionar duas informações de que a classe .ui-tabs-navé para Navegação associada e .ui-tabs-panelestá associada ao painel de conteúdo da guia. neste link demo no site jquery ui você verá que esta classe é usada - http://jqueryui.com/tabs/#manipulation

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

então você terá o índice da guia de 0

simples

Experimente o seguinte:

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

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

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

Eu descobri que o código abaixo faz o truque. Define uma variável do índice da guia recém-selecionada

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

Você pode postar a resposta abaixo em sua próxima postagem

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

Outra maneira de obter o índice da guia selecionada é:

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');  
    }  
});  

Na variável url você obterá o HREF / URL da guia atual

Você pode encontrá-lo via:

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});

pegue uma variável oculta como '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'e em cada evento onclick da guia escreva o código como ...

<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>

você pode obter o valor de 'sel_tab' na página postada. :), simples !!!

Se você quiser garantir que ui.newTab.index()está disponível em todas as situações (guias locais e remotas), chame-o na função ativar como diz a documentação :

$("#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
    }
});