web-dev-qa-db-fra.com

obtenir l'onglet actuel dans les onglets de l'interface utilisateur jQuery

J'utilise les onglets de l'interface utilisateur jQuery à l'intérieur de la fenêtre de dialogue de l'interface utilisateur jQuery.

Je suis tombé sur un cas où je dois trouver l'id de l'onglet actuel en cliquant sur l'un des boutons de la boîte de dialogue. En regardant le code HTML généré par les onglets et la boîte de dialogue de l'interface utilisateur de jQuery, je ne trouve pas vraiment le moyen de le faire. Les éléments <ul> qui contiennent l'onglet sont à environ 3 <div> du groupe de boutons de la boîte de dialogue. 

J'ai essayé:

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

Mais je viens de recevoir une alerte «non définie».

Y-a-t'il une façon de le faire?

Merci

jqueryjquery-uijquery-ui-dialogjquery-ui-tabs
13
SkyeBoniwell

Selon le manuel http://api.jqueryui.com/tabs/ getter de l’onglet JqueryUI actif est 

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

* Remplacez ".selector" par votre numéro. 

Alors active.attr( 'id' ) vous retournera exactement ce dont vous avez besoin.

2
zeliboba

C'est ce qui a fonctionné pour moi (jQuery 1.9, jQueryUI 1.10). Je n'ai pas testé cela pour les versions antérieures de jQueryUI, mais si vous avez jQueryUI 1.8 ou une version antérieure, essayez d'utiliser 'select' au lieu de 'actif'.

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

Utilisez ce qui suit dans le cas de jQuery 1.9+,

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

Pour JQuery UI 1.11+ cela a fonctionné pour moi:

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

A travaillé pour moi de cette façon ⚡

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

// pour obtenir les onglets sélectionnés

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

2
saqib javaid

voici le correct et le plus simple:

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

Vous devez ajouter un sélecteur actif à côté du volet d'onglets. Cela retournera l'ID de l'onglet actif en cours.

1
Marlon Ingal

Supposons que l'identifiant du conteneur d'onglets ui est tab-container. Le bout de travail est

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

Testé avec jQuery UI v1.11.2, jQuery v1.11.3 et Chrome 45. 

1
userlond

Ce qui a fonctionné pour moi a été:

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

Cela fonctionne également, en utilisant JQuery 3.1.1 et Jquery UI 1.12.1, lorsque vous devez sélectionner votre onglet actif en javascript (par "select", je veux dire dans un sélecteur JQuery, pas "select" dans le sens de rendre l'onglet actif , bien sûr, l'onglet est déjà actif).

Pour obtenir une référence à l'onglet actuellement sélectionné, commencez par obtenir une référence au lien actif (remplacez l'id de votre conteneur d'onglets "myTabs"):

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

$ link a l'identifiant l'onglet dans l'attribut "aria-controls":

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

$ tab est une référence au corps de l'onglet. Par exemple, vous pouvez appeler 

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

pour remplir ou remplacer le contenu de l'onglet.

0
Tom Regan

(Cette réponse est pertinente pour JQuery UI 1.12 et probablement quelques versions antérieures.)

Cela dépend de ce que vous entendez par onglet ... Il y a la chose sur laquelle vous cliquez pour sélectionner un onglet et le panneau qui est affiché à cause du clic. La chose sur laquelle vous cliquez est un élément de liste <li> qui contient une balise d'ancrage <a> avec un attribut href qui pointe vers l'identifiant du panneau (il est précédé d'un '#'). Les valeurs de l'id du panneau et de l'href sont définies par vous (pas JQuery). L'élément de la liste n'a pas d'identifiant par défaut, mais l'élément d'ancrage le fait ... il est généré par JQuery et ressemblera à "ui-id-88". Pour obtenir l'identifiant de tabulation, d'ancrage ou de panneau, vous pouvez utiliser les éléments suivants:

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