42

jquery1.9とjqueryUI1.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>
4

11 に答える 11

58

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

$("#tabs").tabs({
  beforeActivate: function (event, ui) {
    alert(ui.newPanel.attr('id'));
  }
});
于 2013-02-24T08:23:58.090 に答える
22 
var $tabs = $("#tabs").tabs({
    select: function( evt, ui ) {
        $("#current").text( $(ui.tab).attr('href'));
    }
})

更新-jqueryUI1.10の別のソリューション

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

jsFiddleデモを更新

于 2013-01-24T13:17:22.950 に答える
4

これは私のために働く

$( "#editor_tabs" ).tabs( { 
    activate: function ( event, ui ) {
        $(ui.newTab.find("a").attr("href")).html("Got It");
    }
});
于 2013-12-06T06:06:09.647 に答える
2

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

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

編集

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

于 2013-01-24T13:21:56.823 に答える
1

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

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

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

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

于 2013-09-28T00:36:08.037 に答える
1

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)
    }
});
于 2013-10-14T05:01:01.590 に答える
1 
var id=$("ulselector li.ui-state-active").attr("aria-controls"));
alert(id);
于 2014-10-20T06:58:00.763 に答える
0

aria-controlsを使用する

alert(ui.newTab.attr("aria-controls"));
于 2013-01-27T12:00:13.907 に答える
0

私の意見では、最も簡単な方法は、タブを構成するに追加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"）はタブ名を返します。これにより、必要なその他の情報をタブに追加することもできます。シンプルなソリューションとスケーラブルだと思います。

于 2015-01-13T03:53:23.737 に答える
0

わたしにはできる

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');
于 2015-03-11T05:52:37.860 に答える
0

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

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

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

于 2016-01-20T09:49:11.930 に答える