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

112

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

Mark Struzinski
quelle

Antworten:

71

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.

rotes Quadrat
quelle
Sehr schöne Antwort! Ich habe eine Zusammenfassung Ihrer Aktivitäten in die Website aufgenommen, um die Beantwortung zu vereinfachen.
Torial
Prost, das Q erwähnte, dass das UI-Objekt null war, daher wird ui.index derzeit fehlschlagen. Ich denke, die Antwort ist vielleicht nicht so einfach.
Redsquare
Dies war eine perfekte Antwort und danke für das großartige Beispiel! Ich habe versucht, alles in einem Schuss zu machen, und es hat nicht funktioniert. Nachdem ich es aufgeteilt hatte, funktionierte alles wie angekündigt.
Mark Struzinski
4
Die Antwort ist da - verwenden Sie die Eigenschaft ui.index, um den aktuellen Index im tabselect-Ereignis abzurufen .....
redsquare
17
Die Antwort sollte aktualisiert werden, da sie nicht mit JQuery UI 1.9.0 funktioniert. Sie sollten ui.index mit ui.newTab.index () gemäß dem Upgrade-Handbuch ( jqueryui.com/upgrade-guide/1.9/… ) ändern
Giorgio Luparia
201

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')
Contra
quelle
2
Das schien sowieso das zu sein, was ich brauchte.
El Yobo
2
Es sieht so aus, als ob dies tatsächlich die Standardregisterkarte ergibt, nicht die aktuell ausgewählte Registerkarte. Was vermisse ich? 42 Stimmen können nicht falsch sein, oder? jqueryui.com/demos/tabs/#option-selected
Patrick Szalapski
Ja, diese Lösung hat geholfen. Vielen Dank @Contra
Ashwin
9
Die Option 'ausgewählt' wurde in jQuery UI Version 1.9 in 'aktiv' umbenannt (siehe jqueryui.com/changelog/1.9.0 )
jake
43

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.

SpYk3HH
quelle
Großartig, danke! Wenn Sie möchten, können Sie dies auch als Antwort auf stackoverflow.com/q/1864219/11992 angeben .
Nikow
Genau das habe ich gebraucht - Danke!
Justin Ethier
5
Die Option 'ausgewählt' wurde in jQuery UI Version 1.9 in 'aktiv' umbenannt (siehe jqueryui.com/changelog/1.9.0).
Jake
41

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 .

Giorgio Luparia
quelle
6
Es wäre großartig, wenn Sie Ihre Antwort mit einigen zusätzlichen Details ausarbeiten könnten.
Schlitten
12
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');
MeneerBij
quelle
11

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.

Ben Koehler
quelle
@Ben: Ihre Lösung gibt die zuvor ausgewählte Registerkarte an, da dies der Index war, als das Ereignis tabsselect ausgelöst wurde.
Michael Mao
1
@ Michael: Hast du meine Antwort gelesen oder einfach den Code geholt? In meiner Antwort erkläre ich, dass der Code nicht so funktioniert wie er ist und biete einige Alternativen ('tabshow' Ereignis; ui.index; $ ('TabList'). Tabs (). Data ('selected.tabs'))
Ben Koehler
: Entschuldigung für meine späte Antwort. Ja, der ui.index funktioniert einwandfrei. Ich wollte nur darauf hinweisen, dass selected.tabs die "vorherige" ausgewählte Registerkarte angibt, nicht die heilende. Ich meine keine Beleidigung Ihrer Antwort.
Michael Mao
5

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

user1714346
quelle
4

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.

Lanze
quelle
4

Der einfachste Weg, dies zu tun, ist

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

und für den Index

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

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

dekdev
quelle
3
$( "#tabs" ).tabs( "option", "active" )

dann haben Sie den Index der Registerkarte von 0

einfach

Qin Wang
quelle
2

Versuche Folgendes:

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

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

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

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();
    }
});
Brian M.
quelle
2

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

var selectedTabIndex= $("#tabs").tabs('option', 'active');
Mike Clark
quelle
Diese Antwort ist nützlich, um die aktuell aktive Registerkarte zu finden, insbesondere wenn sie nicht im Kontext eines Registerkartenauswahlereignisses steht.
Hrabinowitz
1

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

var index = jQuery('#tabs').data('tabs').options.selected;
chrism
quelle
1
$("#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

Chandre Gowda
quelle
1

Sie finden es über:

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

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

Paresh
quelle
2
Ich habe Sie nicht abgewählt, aber es gibt keinen Grund für das zusätzliche Markup und Inline-JavaScript. Zumal er bereits jQuery benutzt ...
Justin Ethier
0

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/

Programmierer
quelle
0
$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});
iman64
quelle
1
Willkommen bei Stack Overflow! Während Links eine großartige Möglichkeit sind, Wissen zu teilen, werden sie die Frage nicht wirklich beantworten, wenn sie in Zukunft kaputt gehen. Fügen Sie Ihrer Antwort den wesentlichen Inhalt des Links hinzu, der die Frage beantwortet. Falls der Inhalt zu komplex oder zu groß ist, um hierher zu passen, beschreiben Sie die allgemeine Idee der vorgeschlagenen Lösung. Denken Sie daran, immer einen Linkverweis auf die Website der ursprünglichen Lösung zu führen. Siehe: Wie schreibe ich eine gute Antwort?
sɐunıɔ ןɐ qɐp