jquery - タブでの動的データの使用

Question

これはとても簡単に聞こえますが、構文がわかりません。

複数の並べ替え可能なリストを含むタブがあります。

しかし、タブに焦点を当てています。タブがクリックされると、さまざまなアクションを実行したいと思います。これは、以下のように実現できます。

$( '#tabs' ).tabs({ 
   selected: '<?php echo 'tabs-'.$iTabSelected ?>',
   select: function( event, ui ) {
    // actions performed
   } 
});

私を妨げているのは、タブを構成するli要素のIDを取得する方法です:

<div id="tabs">
    <div>
        <div class="tabs">
        <ul id="pui-tabs">

        <?php foreach( $aTabListData as $iKey => $aTabList ) { ?>

            <li id="tab-<?php echo $aTabList['tab'] ?>">

                    <a href="#tabs-<?php echo $aTabList['tab'] ?>"><?php echo $aTabList['name'] ?></a>
            </li>

タブが選択されたときに次のIDを取得しようとしています。

<li id="tab-<?php echo $aTabList['tab'] ?>">

ui.tabli idを取得するために使用できますか?

前もって感謝します。

Answer 1

select メソッドは、実際には 2 つの引数を取ります。

$( '#tabs' ).tabs({ 
   selected: '<?php echo 'tabs-'.$iTabSelected ?>',
   select: function(event, ui) {
      // Objects available in the function context:
      ui.tab     // anchor element of the selected (clicked) tab
      ui.panel   // element, that contains the selected/clicked tab contents
      ui.index   // zero-based index of the selected (clicked) tab
   } 
});