web-dev-qa-db-de.com

rufen Sie die aktuelle Registerkarte in den Registerkarten der jQuery-Benutzeroberfläche ab

Ich verwende jQuery UI-Registerkarten im jQuery UI-Dialogfenster.

Ich bin auf eine Instanz gestoßen, in der ich die ID der aktuellen Registerkarte finden muss, wenn Sie auf eine der Dialogschaltflächen klicken. Wenn ich den HTML-Code von jQuery-UI-Registerkarten und -Dialogfeldern betrachtet, kann ich dies nicht wirklich tun. Die <ul>-Elemente, die die Registerkarte enthalten, sind etwa 3 <div> von der Gruppe der Dialogschaltflächen entfernt. 

Ich habe es versucht:

$("#DialogBox").dialog({
    autoOpen: false,
    modal: true,
    buttons: [
        {
        text: "Save",
        click: function () {
        var currentTabId = $(this).closest("ul").attr("id");
        alert(currentTabId);

Ich bekomme aber nur eine "undefinierte" Warnung zurück.

Gibt es eine Möglichkeit, dies zu tun?

Vielen Dank

13
SkyeBoniwell

Laut Handbuch http://api.jqueryui.com/tabs/ getter ist der aktive JqueryUI-Tab 

var active = $( ".selector" ).tabs( "option", "active" );

* Ersetzen Sie ".selector" durch Ihren. 

Dann wird active.attr( 'id' ) genau das zurückgeben, was Sie brauchen.

2
zeliboba

Das hat bei mir funktioniert (jQuery 1.9, jQueryUI 1.10). Ich habe dies nicht für frühere Versionen von jQueryUI getestet, aber wenn Sie jQueryUI 1.8 oder eine frühere Version haben, versuchen Sie es mit "select" anstelle von "active".

// GET INDEX OF ACTIVE TAB
// make sure to replace #tabs with the actual selector
// that you used to create the tabs
var activeTabIdx = $('#tabs').tabs('option','active');

// ID OF ACTIVE TAB
// make sure to change #tabs to your selector for tabs
var selector = '#tabs > ul > li';
var activeTabID = $(selector).eq(activeTabIdx).attr('id');

// ID OF ACTIVE TAB CONTENT
// make sure to change #tabs to your selector for tabs
var selector = '#tabs [id=ui-tabs-' + (activeTabIdx + 1) + ']';
var activeTabContentID = $(selector).attr('id');
16
Michael

Verwenden Sie Folgendes bei jQuery 1.9+,

var currentTabId = $('div[id="mytabs"] ul .ui-tabs-active').attr("id");
13
Santosh

Für JQuery UI 1.11+ das hat für mich funktioniert:

$("ul>.ui-tabs-active").attr('aria-controls');
8
maja

⚡ hat auf diese Weise für mich gearbeitet ⚡

var currentTab=$("ul> .ui-tabs-active").attr('aria-controls');
console.log(currentTab);
3
Rizerzero

// um ausgewählte Registerkarten zu erhalten

var tabs = $ (" #tabs "). children (). find (" .current "). attr ( 'href' );

2
saqib javaid

hier ist der richtige und der einfachste:

var active = $(".tab-pane.active").attr("id");
console.log(active);

Sie sollten einen aktiven Selektor neben dem Registerkartenbereich hinzufügen. Dadurch wird die aktuell aktive Tab-ID zurückgegeben.

1
Marlon Ingal

Die Container-ID des UI-Registers ist Tab-Container. Arbeitsausschnitt ist

$('#tab-container').find('>div:nth-of-type(' + ($('#tab-container').tabs("option", "active") + 1) + ')'); 

Getestet mit jQuery UI v1.11.2, jQuery v1.11.3 und Chrome 45. 

1
userlond

Was für mich funktioniert hat war:

var current_tab = $("#tabs .ui-state-active a").attr('href');
1
trojan

Dies funktioniert auch mit JQuery 3.1.1 und Jquery UI 1.12.1, wenn Sie Ihre aktive Registerkarte in Javascript auswählen müssen (mit "Auswahl" meine ich in einem JQuery-Selektor und nicht "Auswahl" im Sinne der Aktivierung der Registerkarte , da die Registerkarte natürlich bereits aktiv ist).

Um einen Verweis auf den aktuell ausgewählten Tab zu erhalten, rufen Sie zuerst einen Verweis auf den aktiven Link auf (ersetzen Sie die ID Ihres Tabs-Containers "myTabs"):

var $link = $('div[id=myTabs] ul .ui-tabs-active');

$ link hat die ID des Tabs im Attribut "aria-controls":

var $tab = $('#' + $link.attr('aria-controls'));

$ tab ist eine Referenz auf den Tabulator. Zum Beispiel könnten Sie anrufen 

$tab.html('[html here]') 

um den Tab-Inhalt auszufüllen oder zu ersetzen.

0
Tom Regan

(Diese Antwort ist relevant für JQuery UI 1.12 und wahrscheinlich einige Versionen zuvor.)

Es hängt davon ab, was Sie mit "Tab" meinen. Es gibt eine Sache, auf die Sie klicken, um eine Registerkarte auszuwählen, und das Feld, das aufgrund des Klicks angezeigt wird. Das Element, auf das Sie klicken, ist ein Listenelement <li>, das einen Anker <a>-Tag mit einem href-Attribut enthält, das auf die Panel-ID verweist (diese wird mit einem '#' vorangestellt). Die Panel-ID und die Href-Werte werden von Ihnen festgelegt (nicht von JQuery). Das Listenelement hat standardmäßig keine ID, aber das Ankerelement hat ... es wird von JQuery generiert und ähnelt 'ui-id-88'. Um entweder die Tab-ID, die Anker-ID oder die Panel-ID abzurufen, können Sie Folgendes verwenden:

// if you have nested tabs this might not work... in such case, give 
// your parent tab and panel a unique class and use it in selector
var $tabs = $("#tabs");
var tabIndex = $tabs.tabs("option", "active");
var $tab = $tabs.find("li[role=tab]").eq(tabIndex);
var tabId = $tab.attr("id"); // undefined unless set by user
var anchorId = $tab.attr("aria-labelledby"); // or $tabs.find("ul li a.ui-tabs-anchor").eq(tabIndex).attr("id");
var panelId = $tab.attr("aria-controls"); //or $tabs.find(".ui-tabs-panel").eq(tabIndex).attr("id");
// note: panelId will also be in href of anchor with prepended # sign
alert("tabId=" + tabId + ", anchorId=" + anchorId + ", panelId=" + panelId);
0
splashout