jquery - jQuery タブの現在選択されているタブ ID が必要

Question

ui.panel.id現在選択されているタブのインデックスを取得できることはわかっていますが、現在選択されているタブの ID (これがタブイベントによってトリガーされた場合と同等ですが、そうではありません) を取得できますか? タブの順序が変わる可能性があるため、インデックスを使用しないことをお勧めします。スタイルマークアップは将来のリリースで変更される可能性があるため、使用しないことを好みます。これには方法がありますか？そうでない場合は、インデックスを使用してこれにアクセスできますか (最初にパネルオブジェクトにアクセスしてもかまいません)。他のアイデアはありますか？

score 22 · Accepted Answer

:visible疑似セレクターを使用して、表示されているパネルをターゲットにすることができます。

$("#tabs .ui-tabs-panel:visible").attr("id");

activateイベントからアクティブなタブを取得できることに注意してください。

$("#tabs").tabs({
    activate: function (event, ui) {
        console.log(ui.newPanel[0].id);
    }
});

score 4 · Accepted Answer

選択したタブからid(または実際には) が必要な場合は、を使用して jQuery オブジェクトを取得できます。hrefeq()

ここで例を見ることができます: http://jsfiddle.net/svierkant/hpU3T/1/

score 3 · Accepted Answer

選択した JQuery 1.9 が非推奨になった後

だから使う

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

score 3 · Accepted Answer

この質問への回答に投稿したように、これを実現するにはいくつかの方法があります。

jQueryドキュメントでは、現在開いているタブのインデックスを見つけるために次のことを提案しています:

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

ただし、そのタブで多くのことを行う必要がある場合、これは実用的ではありません。実際の要素を取得するためのより実用的なソリューションをまだ提供していない理由はわかりませんが、jQuery を使用すると、自分で作成できる簡単なソリューションがあります。

次のコードでは、現在のタブでやりたいことを簡単に実行できることを示します。

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),  //  will get you the index number of where it sits
    curTabID = curTab.prop("id"),  //  will give you the id of the tab open if existant
    curTabCls = curTab.attr("class");  //  will give you an array of classes on this tab
        //  etc ....
//    now, if you wanted a little more depth, for instance specific tabs area (if you have multiple tabs on your page) you can do simply add to your selector statement
var curTab = $('#myTabs_1 .ui-tabs-panel:not(.ui-tabs-hide)');
//    then you can make simple calls to that tab and get whatever data or manipulate it how you please
curTab.css("background-color", "#FFF");

score 0 · Accepted Answer

0

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

于 2012-07-27T14:55:52.187 に答える

score 0 · Accepted Answer

jQuery UI >= 1.9 の場合、以下を使用できますui.newPanel.selector。

$('#tabs').on('tabactivate', function(event, ui) {
  console.log(ui.newPanel.selector);
});

score -1 · Accepted Answer

-1

$("#tabs .ui-state-active a").attr("id");

于 2014-11-22T06:55:31.303 に答える

jquery - jQuery タブの現在選択されているタブ ID が必要

11 に答える 11

Related

Reference