web-dev-qa-db-ja.com

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

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

jqueryjquery-uijquery-tabs
18
ejf

:visible pseudo-selector 表示されているパネルをターゲットにするには：

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

activateイベント からアクティブなタブを取得できることは注目に値します。

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

ジョナサンサンプソンの答えはもう機能しません。試してみてください...

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

jsFiddle： http://jsfiddle.net/tbEq6/

13
Homer

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

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

4
Stephan Vierkant

選択されたJQuery1.9が非推奨になった後

だから使用する

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

3
Manjesh V

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

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");
3
SpYk3HH

1.9未満のjqueryバージョンの場合：

 <div class="roundedFloatmenu">
        <ul id="unid">
            <li class="titleHover" id="li_search">Search</li>               
            <li class="titleHover" id="li_notes">Notes</li>
             <li class="titleHover active" id="li_writeback">Writeback</li>         
            <li class="titleHover" id="li_attorney">Attorney</li>
        </ul>
    </div

そして、次を使用してアクティブなタブを見つけることができます。

 jQuery('#unid').find('li.active').attr('id')
1
Yoosaf Abdulla

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

$('#tabs').on('tabactivate', function(event, ui) {
  console.log(ui.newPanel.selector);
});
0
Kevin Qi
var curTab = $jQuery('#tabs .ui-tabs-panel:not(.ui-tabs-hide)').attr('id');
0
abg

これは機能します：

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');
0
krunal chavda