jQuery UI Tabs - So erhalten Sie den aktuell ausgewählten Registerkartenindex

Ich weiß , dass diese spezifische Frage wurde vor gefragt , aber ich bin keine Ergebnisse bekommen die Verwendung bind()Ereignis auf dem jQuery UI TabsPlugin.

Ich brauche nur die indexder neu ausgewählten Registerkarte, um eine Aktion auszuführen, wenn auf die Registerkarte geklickt wird. bind()Ermöglicht es mir, mich in das Auswahlereignis einzuhängen, aber meine übliche Methode zum Abrufen der aktuell ausgewählten Registerkarte funktioniert nicht. Es gibt den zuvor ausgewählten Registerkartenindex zurück, nicht den neuen:

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

Hier ist der Code, den ich verwenden möchte, um die aktuell ausgewählte Registerkarte abzurufen:

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

});

Wenn ich diesen Code verwende, kommt das UI-Objekt zurückundefined . In der Dokumentation sollte dies das Objekt sein, mit dem ich mich mit ui.tab in den neu ausgewählten Index einbinde. Ich habe dies beim ersten tabs()Anruf und auch alleine versucht . Mache ich hier etwas falsch

Für JQuery UI-Versionen vor 1.9 : ui.indexvon der eventist, was Sie wollen.

Für JQuery UI 1.9 oder höher : siehe die Antwort von Giorgio Luparia unten.

Wenn Sie den Registerkartenindex von außerhalb des Kontexts eines Registerkartenereignisses abrufen müssen, verwenden Sie Folgendes:

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

Update: Ab Version 1.9 wird 'ausgewählt' in 'aktiv' geändert.

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

UPDATE [ _{So 26.08.2012} ] Diese Antwort ist so populär geworden, dass ich beschlossen habe, sie zu einem vollwertigen Blog / Tutorial zu machen.
Bitte besuchen Sie Mein Blog hier , um die neuesten Informationen zum einfachen Zugriff auf die Arbeit mit Registerkarten in jQueryUI zu erhalten.
Ebenfalls enthalten (auch im Blog) ist eine jsFiddle

¡¡¡Update! Bitte beachten Sie: In neueren Versionen von jQueryUI (1.9+) ui-tabs-selectedwurde durch ersetzt ui-tabs-active. !!!

Ich weiß, dass dieser Thread alt ist, aber etwas, das ich nicht erwähnt habe, war, wie man den "ausgewählten Tab" (derzeit heruntergeklapptes Feld) von einem anderen Ort als den "Tab-Ereignissen" erhält. Ich habe einen einfachen Weg ...

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

Und um den Index einfach zu erhalten, gibt es natürlich den auf der Website aufgeführten Weg ...

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

Sie könnten jedoch meine erste Methode verwenden, um den Index und alles, was Sie über dieses Panel wollen, ziemlich einfach zu erhalten ...

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

PS. Wenn Sie eine iframe-Variable verwenden, dann .find ('. UI-tabs-panel: not (.ui-tabs-hide)'), können Sie dies auch für ausgewählte Registerkarten in Frames leicht tun. Denken Sie daran, jQuery hat bereits die ganze harte Arbeit geleistet, ohne das Rad neu erfinden zu müssen!

Nur um zu erweitern (aktualisiert)

Es wurde mir die Frage gestellt: "Was ist, wenn die Ansicht mehr als einen Registerkartenbereich enthält?" Denken Sie auch hier einfach, verwenden Sie dasselbe Setup, verwenden Sie jedoch eine ID, um zu identifizieren, welche Registerkarten Sie erhalten möchten.

Zum Beispiel, wenn Sie haben:

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

Und Sie möchten das aktuelle Bedienfeld des zweiten Registerkartensatzes:

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

Und wenn Sie die Registerkarte TATSÄCHLICH und nicht das Bedienfeld möchten (ganz einfach, weshalb ich es vorher nicht erwähnt habe, aber ich nehme an, ich werde es jetzt tun, nur um gründlich zu sein).

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

Denken Sie daran, jQuery hat die ganze harte Arbeit geleistet, denken Sie nicht so hart.

Wenn Sie JQuery UI Version 1.9.0 oder höher verwenden, können Sie in Ihrer Funktion auf ui.newTab.index () zugreifen und erhalten, was Sie benötigen.

Für frühere Versionen verwenden Sie 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');

Wann versuchen Sie, auf das UI-Objekt zuzugreifen? ui ist undefiniert, wenn Sie versuchen, außerhalb des Bindungsereignisses darauf zuzugreifen. Auch wenn diese Zeile

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

wird in der Veranstaltung wie folgt ausgeführt:

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

selectedTab entspricht der aktuellen Registerkarte zu diesem Zeitpunkt (der "vorherigen"). Dies liegt daran, dass das Ereignis "tabsselect" aufgerufen wird, bevor die angeklickte Registerkarte zur aktuellen Registerkarte wird. Wenn Sie dies dennoch auf diese Weise tun möchten, führt die Verwendung von "tabsshow" dazu, dass selectedTab der angeklickten Registerkarte entspricht.

Dies scheint jedoch zu komplex zu sein, wenn Sie nur den Index wünschen. ui.index innerhalb des Ereignisses oder $ ("# TabList"). tabs (). Daten ("selected.tabs") außerhalb des Ereignisses sollten alles sein, was Sie benötigen.

Dies änderte sich mit Version 1.9

etwas wie

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


        });

sollte benutzt werden. Das funktioniert gut für mich ;-)

Falls jemand versucht hat, innerhalb eines Iframes auf Registerkarten zuzugreifen, stellen Sie möglicherweise fest, dass dies nicht möglich ist. Die divRegisterkarte wird niemals als ausgewählt markiert, nur als ausgeblendet oder nicht ausgeblendet. Der Link selbst ist das einzige Stück, das als ausgewählt markiert ist.

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

Im Folgenden erhalten Sie den hrefWert des Links, der mit der ID Ihres Registerkartencontainers übereinstimmen sollte:

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

Dies sollte auch funktionieren anstelle von: $tabs.tabs('option', 'selected');

Es ist in dem Sinne besser, dass Sie nicht nur den Index der Registerkarte abrufen, sondern auch die tatsächliche ID der Registerkarte erhalten.

Der einfachste Weg, dies zu tun, ist

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

und für den Index

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

Falls Sie Active Tab Index finden und dann auf Active Tab zeigen

Holen Sie sich zuerst den aktiven Index

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

Rufen Sie dann mit der CSS-Klasse das Inhaltsfenster der Registerkarte auf

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

Wickeln Sie es jetzt in ein jQuery-Objekt, um es weiter zu verwenden

 var tabContent$ = $(element);

Hier möchte ich zwei Informationen hinzufügen, die der Klasse .ui-tabs-navfür die Navigation zugeordnet sind und .ui-tabs-panelmit dem Inhaltsbereich der Registerkarte verknüpft sind. In dieser Link-Demo auf der Website von jquery ui sehen Sie, dass diese Klasse verwendet wird - http://jqueryui.com/tabs/#manipulation

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

dann haben Sie den Index der Registerkarte von 0

einfach

Versuche Folgendes:

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

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

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

Ich fand, dass der folgende Code den Trick macht. Legt eine Variable des neu ausgewählten Registerkartenindex fest

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

Sie können die Antwort unten in Ihrem nächsten Beitrag posten

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

Eine andere Möglichkeit, den ausgewählten Registerkartenindex abzurufen, ist:

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

In der URL- Variablen erhalten Sie die HREF / URL der aktuellen Registerkarte

Sie finden es über:

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

Nehmen Sie eine versteckte Variable wie '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'und schreiben Sie auf das Onclick-Ereignis jeder Registerkarte Code wie ...

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

Sie können den Wert von 'sel_tab' auf der veröffentlichten Seite abrufen. :), einfach !!!

Wenn Sie sicherstellen möchten, dass ui.newTab.index()es in allen Situationen verfügbar ist (lokale und Remote-Registerkarten), rufen Sie es in der Aktivierungsfunktion auf , wie in der Dokumentation angegeben :

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