web-dev-qa-db-ja.com

jQuery UIタブ-現在選択されているタブインデックスを取得する方法

この特定の質問は 前に尋ねた でしたが、jQuery UI Tabsプラグインでbind()イベントを使用しても結果が得られません。

タブがクリックされたときにアクションを実行するには、新しく選択したタブのindexが必要です。 bind()を使用すると、選択イベントにフックできますが、現在選択されているタブを取得する通常の方法は機能しません。新しいインデックスではなく、以前に選択したタブインデックスを返します。

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

現在選択されているタブを取得するために使用しようとしているコードは次のとおりです。

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

});

このコードを使用すると、uiオブジェクトがundefinedに戻ります。ドキュメントから、これは、ui.tabを使用して新しく選択されたインデックスにフックするために使用しているオブジェクトである必要があります。私はこれを最初のtabs()呼び出しで、またそれ自体で試しました。ここで何か間違ったことをしていますか？

javascriptjqueryjquery-uitabsjquery-ui-tabs
109
Mark Struzinski

1.9より前のJQuery UIバージョンの場合：eventのui.indexが必要です。

JQuery UI 1.9以降：以下のGiorgio Lupariaによる answer を参照してください。

70
redsquare

タブイベントのコンテキスト外からタブインデックスを取得する必要がある場合は、これを使用します。

function getSelectedTabIndex() { 
    return $("#TabList").tabs('option', 'selected');
}

更新：バージョン1.9から「選択」が「アクティブ」に変更されました

$("#TabList").tabs('option', 'active')
200
Contra

UPDATE[日08/26/2012]この回答は非常に人気があるため、本格的なブログ/チュートリアルにすることにしました
My Blog Here にアクセスして、jQueryUIのtabsの操作に関する最新の簡単なアクセス情報を参照してください。
（ブログにも） jsFiddle も含まれています

更新してください！注：jQueryUIの新しいバージョン（1.9以降）では、ui-tabs-selectedがui-tabs-activeに置き換えられました。 !!!

私はこのスレッドが古いことを知っていますが、 私が言及しなかったのは、「タブイベント」以外の場所から「選択されたタブ」（現在ドロップダウンパネル）を取得する方法でした。私は簡単な方法を持っています...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

そして、簡単にインデックスを取得するために、もちろんサイトにリストされている方法があります...

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

ただし、最初の方法を使用して、インデックスとそのパネルに必要なものを非常に簡単に取得できます...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

PS。 iframe変数を使用してから.find（ '。ui-tabs-panel：not（.ui-tabs-hide）'）を使用すると、フレーム内の選択したタブに対しても簡単にこれを行うことができます。覚えておいて、jQueryはすでにすべてのハードワークを行っており、車輪を再発明する必要はありません！

ただ拡張する（更新）

「ビューに複数のタブ領域がある場合はどうなりますか？」という質問が寄せられました。繰り返しますが、単純に考えて、同じ設定を使用しますが、IDを使用してどのタブを保持するかを識別します。

たとえば、次の場合：

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

そして、2番目のタブセットの現在のパネルが必要です。

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

そして、パネルではなくACTUALタブが必要な場合（本当に簡単です。そのため、これまで言及していませんでしたが、今は徹底的に説明します）

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

繰り返しになりますが、jQueryはすべてのハードワークを行ったので、それほど熱心に考えないでください。

43
SpYk3HH

JQuery UIバージョン1.9.0以降を使用している場合は、関数内でi.newTab.index（）にアクセスし、必要なものを取得できます。

以前のバージョンでは、i.indexを使用します。

41
Giorgio Luparia

いつUIオブジェクトにアクセスしようとしていますか？バインドイベントの外部でアクセスしようとすると、uiは未定義になります。また、この行

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

次のようなイベントで実行されます：

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

selectedTabは、その時点での現在のタブ（「前の」タブ）と等しくなります。これは、クリックされたタブが現在のタブになる前に「tabsselect」イベントが呼び出されるためです。それでもこの方法でやりたい場合は、代わりに「tabsshow」を使用すると、selectedTabがクリックされたタブと等しくなります。

ただし、必要なのがインデックスだけである場合は、複雑すぎるようです。イベント内のui.indexまたはイベント外の$（ "＃TabList"）。tabs（）。data（ "selected.tabs"）が必要です。

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

これはバージョン1.9で変更されました

何かのようなもの

 $(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());
            }


        });

使用すべきです。これは私のためにうまく機能しています;-)

5
user1714346

これを行う最も簡単な方法は

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

インデックス用

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

アクティブタブインデックスを見つけてアクティブタブをポイントする場合

最初にアクティブインデックスを取得する

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

次に、cssクラスを使用してタブコンテンツパネルを取得します

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

これをさらに使用するためにjQueryオブジェクトにラップしました

 var tabContent$ = $(element);

ここで、クラス.ui-tabs-navはナビゲーションに関連付けられ、.ui-tabs-panelはタブコンテンツパネルに関連付けられた2つの情報を追加します。 jquery ui Webサイトのこのリンクデモでは、このクラスが使用されていることがわかります- http://jqueryui.com/tabs/#manipulation

4
dekdev

誰かがiframe内からタブにアクセスしようとした場合、それが不可能であることに気付くかもしれません。タブのdivは、非表示または非表示として、選択済みとしてマークされることはありません。リンク自体は、選択済みとしてマークされた唯一のピースです。

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

以下は、リンクのhref値を取得します。この値は、タブコンテナのIDと同じである必要があります。

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

これは次の場所でも機能するはずです：$tabs.tabs('option', 'selected');

単にタブのインデックスを取得する代わりに、タブの実際のIDを提供するという意味で優れています。

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

その後、0のタブのインデックスがあります

シンプルな

3
Qin Wang

下のコードがそのトリックをしていることがわかりました。新しく選択されたタブインデックスの変数を設定します

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

以下を試してください：

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

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

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

次の投稿の回答の下に投稿できます

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

選択したタブインデックスを取得する別の方法は次のとおりです。

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

rl変数では、現在のタブのHREF/URLを取得します

1
Chandre Gowda

'<input type="hidden" id="sel_tab" name="sel_tab" value="" />'のような隠し変数を取り、各タブのonclickイベントで...

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

投稿ページで「sel_tab」の値を取得できます。 :)、シンプル!!!

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

ui.newTab.index()がすべての状況（ローカルおよびリモートのタブ）で使用できるようにする場合は、activate関数で- ドキュメント 言います：

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