it-swarm.com.de

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

Ich weiß, dass diese spezifische Frage zuvor gestellt war, aber ich erhalte mit dem Ereignis bind() des jQuery UI Tabs-Plugins keine Ergebnisse. 

Ich brauche nur die Variable index der neu ausgewählten Registerkarte, um eine Aktion auszuführen, wenn auf die Registerkarte geklickt wird. bind() erlaubt es mir, mich in das select -Ereignis einzuhaken, aber meine übliche Methode, die aktuell ausgewählte Registerkarte zu erhalten, funktioniert nicht. Es gibt den zuvor ausgewählten Registerindex zurück, nicht den neuen:

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

Hier ist der Code, den ich versuche, um den aktuell ausgewählten Tab zu erhalten:

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

});

Wenn ich diesen Code verwende, kommt das UI-Objekt zurück undefined. In der Dokumentation sollte dies das Objekt sein, das ich verwende, um mithilfe von ui.tab in den neu ausgewählten Index einzuhängen. Ich habe dies beim ersten Aufruf von tabs() und auch alleine versucht. Mache ich hier etwas falsch?

108
Mark Struzinski

Für JQuery UI-Versionen vor 1.9: ui.index aus der event ist das, was Sie wollen.

Für JQuery UI 1.9 oder höher: siehe answer von Giorgio Luparia, weiter unten.

69
redsquare

Wenn Sie den Tabulatorindex außerhalb des Kontextes eines Tabs-Ereignisses 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')
198
Contra

UPDATE [So 26.08.2012] Diese Antwort ist so populär geworden, dass ich mich dazu entschlossen habe, es in ein vollwertiges Blog/Tutorial zu verwandeln. 
Besuchen Sie Mein Blog hier , um die neuesten Informationen zum einfachen Zugriff auf die Arbeit mit Registerkarten in jQueryUI. 
Ebenfalls enthalten (auch im Blog) ist ein jsFiddle


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


Ich weiß, dass dieser Thread alt ist, aber etwas, das ich nicht gesehen habe, war, wie man den "ausgewählten Tab" ("Dropdown-Bereich") 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 leicht zu bekommen, gibt es natürlich den Weg auf der Website ...

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 wünschen, 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 und dann .find ('. Ui-tabs-panel: nicht (.ui-tabs-hide)') verwenden, können Sie dies auch für ausgewählte Registerkarten in Frames tun Denken Sie daran jQuery hat bereits alle harte Arbeit geleistet, das Rad muss nicht neu erfunden werden!

Einfach erweitern (aktualisiert)

Die Frage wurde an mich herangetragen: "Was ist, wenn es mehr als einen Tab-Bereich in der Ansicht gibt?" Denken Sie einfach darüber nach, verwenden Sie dasselbe Setup, verwenden Sie jedoch eine ID, um herauszufinden, welche Tabs Sie erreichen möchten. 

Zum Beispiel, wenn Sie:

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

Und Sie möchten das aktuelle Panel der zweiten Registerkarte festlegen:

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

Und wenn Sie die Registerkarte ACTUAL und nicht das Panel wünschen (wirklich 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, dass jQuery all die harte Arbeit geleistet hat, denken Sie nicht so hart.

43
SpYk3HH

Wenn Sie die 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 .

38
Giorgio Luparia

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

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

wird in dem Fall so ausgeführt:

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

selectedTab entspricht dem aktuellen Tab zu diesem Zeitpunkt (dem "vorherigen"). Dies liegt daran, dass das Ereignis "tabselect" aufgerufen wird, bevor der angeklickte Tab zum aktuellen Tab wird. Wenn Sie dies immer noch tun möchten, führt die Verwendung von "tabsshow" dazu, dass selectedTab der angeklickten Registerkarte entspricht.

Das scheint jedoch zu komplex, wenn Sie nur den Index wünschen. ui.index innerhalb des Ereignisses oder $ ("# TabList"). tabs (). data ("selected.tabs") außerhalb des Ereignisses sollten alles, was Sie brauchen.

11
Ben Koehler
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');
10
MeneerBij

das hat sich mit Version 1.9 geändert

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

5
user1714346

Falls Sie Active Tab Index finden, zeigen Sie auf Active Tab 

Holen Sie sich zuerst den Active-Index 

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

Verwenden Sie dann die Klasse css, um den Tab-Inhaltsbereich aufzurufen

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

jetzt wickelte es es in ein jQuery-Objekt ein, um es weiter verwenden zu können

 var tabContent$ = $(element);

hier möchte ich zwei Informationen hinzufügen, die der Klasse .ui-tabs-nav für die Navigation zugeordnet sind, und .ui-tabs-panel ist dem Registerkarteninhalt zugeordnet. In diesem Link Demo in Jquery UI Website sehen Sie diese Klasse verwendet wird - http://jqueryui.com/tabs/#manipulation

4
dekdev

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

<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 href-Wert des Links, der mit der ID für Ihren Tab-Container identisch sein sollte:

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

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

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

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

dann haben Sie den Index von 0

einfach

3
Qin Wang

der einfachste Weg dies zu tun ist 

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

und für den Index

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

Ich habe festgestellt, dass der folgende Code den Trick macht. Legt eine Variable des neu ausgewählten Registerindex fest 

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

Versuche Folgendes:

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

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

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

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

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

Eine andere Möglichkeit, den Index der ausgewählten Registerkarte zu erhalten, ist:

var index = jQuery('#tabs').data('tabs').options.selected;
1
chrism
$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

In der Variablen url erhalten Sie die HREF/URL des aktuellen Registers

1
Chandre Gowda

nehmen Sie eine versteckte Variable wie '<input type="hidden" id="sel_tab" name="sel_tab" value="" />' und schreiben Sie auf jedem Onclick-Ereignis auf 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 geposteten Seite erhalten. :) einfach !!!

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

Wenn Sie sicherstellen möchten, dass ui.newTab.index() in allen Situationen verfügbar ist (lokale und entfernte Registerkarten), rufen Sie es in der Funktion enable als Dokumentation auf sagt:

$("#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/

0
prograhammer