web-dev-qa-db-ja.com

jQuery UIタブで現在のタブを取得します

JQuery UIダイアログウィンドウ内でjQuery UIタブを使用しています。

ダイアログボタンの1つをクリックすると、現在のタブのIDを見つける必要があるインスタンスに遭遇しました。 jQuery UIのタブとダイアログによって生成されたHTMLを見ると、実際にこれを行う方法が見つかりません。 <ul>タブを保持する要素は約3 <div>は、ダイアログボタンのグループから離れています。

私は試した：

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

しかし、「未定義」のアラートが返されるだけです。

これを行う方法はありますか？

ありがとう

jqueryjquery-uijquery-ui-dialogjquery-ui-tabs
14
SkyeBoniwell

マニュアルによると http://api.jqueryui.com/tabs/ アクティブなJqueryUIタブのゲッターは

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

* _".selector"_を自分のものに置き換えます。

次に、active.attr( 'id' )は必要なものを正確に返します。

1
zeliboba

これが私にとってうまくいったことです（jQuery 1.9、jQueryUI 1.10）。 jQueryUIの以前のバージョンではこれをテストしていませんが、jQueryUI 1.8以前を使用している場合は、「アクティブ」ではなく「選択」を使用してください。

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

JQuery 1.9+の場合は以下を使用します。

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

JQuery UI 1.11 +の場合、これはうまくいきました：

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

thisこのように働いた⚡

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

ここに正しいものと最も簡単なものがあります：

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

タブペインの横にアクティブなセレクタを追加する必要があります。これにより、現在アクティブなタブIDが返されます。

3
Marlon Ingal

//選択したタブを取得するため

var tabs = $（ "＃tabs"）。children（）。find（ "。current"）。attr（'href'） ;

2
saqib javaid

私のために働いたのは：

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

UIタブコンテナーのIDがタブコンテナーであると仮定します。作業スニペットは

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

JQuery UI v1.11.2、jQuery v1.11.3およびChrome 45。

1
userlond

これは、JQuery 3.1.1およびJquery UI 1.12.1を使用して、javascriptでアクティブなタブを選択する必要がある場合にも機能します（「選択」とは、タブをアクティブにするという意味で「選択」ではなく、JQueryセレクタを意味します） 、もちろんタブはすでにアクティブになっているため）。

現在選択されているタブへの参照を取得するには、まずアクティブリンクへの参照を取得します（タブコンテナのIDを「myTabs」に置き換えます）。

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

$ linkには、属性「aria-controls」のタブidがあります。

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

$ tabは、タブ本体への参照です。たとえば、あなたは呼び出すことができます

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

タブの内容を埋めたり置き換えたりします。

0
Tom Regan

（この回答はJQuery UI 1.12に関連しており、おそらく以前のいくつかのバージョンに関連しています。）

タブの意味によって異なります...クリックしてタブとパネルを選択するためにクリックすることがあります。クリックするのはリストアイテム<li>アンカーを含む<a>タグに、パネルIDを指すhref属性が付いています（先頭に「＃」が付いています）。パネルIDとhrefの値は（JQueryではなく）ユーザーが設定します。リスト項目にはデフォルトでidがありませんが、アンカー要素にはjQueryによって生成され、「ui-id-88」のようなものがあります。タブID、アンカーID、またはパネルIDを取得するには、次を使用できます。

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