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

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

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

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

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

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

});

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

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

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

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

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

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

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

UPDATE [ _{日2012年8月26日には、}この答えは、私が本格的なブログにそれを作ることを決めたほどの人気となっています/チュートリアル
をご覧くださいここで私のブログをでの作業に簡単にアクセス情報の最新のを見て、タブ jQueryUIで
も含ま（ブログでも）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はすべてのハードワークを実行したことを覚えておいてください。

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

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

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

いつ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"）で十分です。

これはバージョン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());
            }


        });

使用すべきです。これは私にとってはうまくいきます;-)

誰かが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を提供するという意味で優れています。

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

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

インデックス用

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

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

まずアクティブインデックスを取得します

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

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

それからあなたは0からのタブのインデックスを持っています

簡単な

以下を試してください：

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

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

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

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

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

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

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

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

var index = jQuery('#tabs').data('tabs').options.selected;

$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

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

あなたはそれを見つけることができます：

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});

のような隠し変数を取り、'<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」の値を取得できます。:)、シンプルです!!!

ui.newTab.index()すべての状況（ローカルタブとリモートタブ）でが利用可能であることを確認したい場合は、ドキュメントに記載されているように、アクティブ化関数でそれを呼び出します。

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

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