web-dev-qa-db-ja.com

アクティブ化されているタブ（div）のIDを取得します

私はjquery 1.9とjquery UI 1.10を使用しています

タブをクリックしたときにタブIDを取得できるようにします。たとえば、「Second」という名前のタブをクリックした場合、「tabs-2」応答を取得します。

これまでに以下のコードを実行しました。

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            beforeActivate: function (event, ui) {
                alert(/* the id of the tab (div) being activated */);
            }
        });
    });
</script>

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">First</a></li>
       <li><a href="#tabs-2">Second</a></li>
    </ul>
    <div id="tabs-1">
        <p>abcde</p>
    </div>
    <div id="tabs-2">
        <p>fghi</p>
    </div>
</div>
jqueryjquery-uijquery-pluginsjquery-tabs
42
AlvaroV

JQueryUI 1.10でテストおよび操作し、選択されたタブのIDを取得する方法：

$("#tabs").tabs({
  beforeActivate: function (event, ui) {
    alert(ui.newPanel.attr('id'));
  }
});
55
thenickdude
var $tabs = $("#tabs").tabs({
    select: function( evt, ui ) {
        $("#current").text( $(ui.tab).attr('href'));
    }
})

[〜＃〜] update [〜＃〜]-jquery UI 1.10の別のソリューション

    $(function () { $('#tabs').tabs({ 
             activate: function (event, ui) {
             var active = $("#tabs").tabs("option", "active");
             alert($("#tabs ul>li a").eq(active).attr('href')); 
     } 
});

jsFiddle Demoの更新

22
MuhammadHani

これは私のために働く

$( "#editor_tabs" ).tabs( { 
    activate: function ( event, ui ) {
        $(ui.newTab.find("a").attr("href")).html("Got It");
    }
});
4
Eelco

タブをクリックしたときに何かを取得したい場合は、selectイベントを使用します。

$('#tabs').tabs({
  beforeActivate: function(event, ui){
     alert($(ui.tab).attr('href'));
 }
 });

編集

バージョン1.10から削除されたため、「select」を「beforeActivate」に変更しました

2
Pitchai P
var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);
1
Nikhil Raj k

JQueryUIイベントオブジェクトを調べます（MozillaのFirebugまたはChrome開発者ツール）などのブラウザーデバッガーを使用します）。

$("#tabs").tabs({        
    activate: function( event, ui ) { 
        console.log(event)  //unnecessary, but it's how to look at the event object              
        alert(event.currentTarget.hash)
    }
});
1
wildbill

どのタブがアクティブになり、それに基づいてさまざまなアクションを実行するかを知りたいと思います。

HTML要素からIDと属性を取得するのではなく、次のようにします。

$("#tabs").on("tabsactivate", (event, ui) => {
    if (ui.newPanel.is("#tabs-1")){
        //first tab activated
    }
    else{
        //second tab activated
    }
});

タブが作成されたときに、アクティブ化イベントが呼び出されていません。そのためには、ミックスに「tabscreate」イベントを追加する必要がありますが、アイデアは得られます。

1
MoonStom

わたしにはできる

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

私の意見では、最も簡単な方法は、タブを構成する_data-_に_<li ...>_を追加することです。

例えば：

_                <li data-index="2" data-tabname="Notes">
                  <a href="#tabs-Employee-Notes">Notes</a>
                </li>
_

次に、beforeActivateイベントを処理します（それが目的のイベントである場合）。

_$("#jqTabs_EmployeeDetails").tabs({
    heightStyle: "fill",
    beforeActivate: function (event, ui) {
        var n = ui.newTab;

        console.log($(n).data());
    }
});
_

たとえば、$(n).data("tabname"）はタブ名を返します。これにより、必要な他の情報をタブに追加することもできます。シンプルなソリューションとスケーラブル。

0
Michael

Aria-controlsを使用する

alert(ui.newTab.attr("aria-controls"));
0
Marius D

私が見つけた最も簡単な方法は：

$('#tabs .ui-state-active').attr('aria-controls')

これにより、アクティブなdivからIDが返されます。 #tabsをjquery.tabs IDに変更する必要があることに注意してください。

0
Frank