112

この特定の質問が以前に尋ねられたことは知っていますが、プラグインで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()私はこれを最初の呼び出しとそれ自体で試しました。ここで何か間違ったことをしていますか？

4

20 に答える 20

201

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

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

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

$("#TabList").tabs('option', 'active')
于 2009-08-26T14:52:44.617 に答える
72

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

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

于 2008-11-18T21:39:33.723 に答える
43

更新[ 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 がすべてのハードワークを行ったことを思い出してください。それほど難しく考えないでください。

于 2011-11-01T14:25:50.947 に答える
42

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

以前のバージョンではui.indexを使用してください。

于 2012-10-19T11:32:32.793 に答える
13 
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');
于 2013-03-12T13:31:01.537 に答える
11

いつUIオブジェクトにアクセスしようとしていますか？bindイベントの外部で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"）で十分です。

于 2008-11-19T02:29:36.180 に答える
5

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


        });

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

于 2013-02-08T18:35:00.483 に答える
4

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

于 2011-04-20T18:48:03.133 に答える
4

Active tab Index を見つけて Active Tab をポイントした場合

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

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

于 2013-07-11T17:53:00.973 に答える
3 
$( "#tabs" ).tabs( "option", "active" )

次に、タブのインデックスが0から取得されます

単純

于 2013-03-21T14:20:09.947 に答える
3

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

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});
于 2013-09-09T22:23:41.680 に答える
2

次のことを試してください。

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

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

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;
于 2012-03-05T16:23:33.417 に答える
1

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

var index = jQuery('#tabs').data('tabs').options.selected;
于 2011-10-26T03:29:14.860 に答える
0

次のような隠し変数を取り、'<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」の値を取得できます。：） 、 単純 ！！！

于 2010-12-10T09:12:21.783 に答える
0

すべての状況 (ローカルおよびリモート タブ) で確実に使用できるようにする場合は、ドキュメントに記載されているように、アクティブ化関数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/

于 2014-09-30T00:36:05.127 に答える