0

ネストされたタブを作成しました。サンプルの end 構造は次のようになります。 注: 「"_1" は foreach を使用して動的に追加されます。そのため、すべての子 div はサーバーの戻り値を使用して動的に作成されます。」

    <div id="tabs">

      <ul id="tablinks">
      <li><a href="#childtab_1">First Parent</a></li>
      <li><a href="#childtab_2">Second Parent</a></li>
      </ul>


    <div id="childtab_1">
       <div id="ct_1">
        <ul id="childTabLinks_1">
        <li><a href="#childtabs-11">First Nested Tab</a></li>
        <li><a href="#childtabs-12">Second Nested Tab</a></li>
        </ul>
        <div id="childtabs-11"><p>First child content</p>
        </div>
        <div id="childtabs-12"><p>Second child content</p>
        </div>
    </div>   

    <div id="childtab_2">   
    .
    .
    </div> 

    In Java Script:   
    $('#tabs').tabs();
    $('#childtabs_1').tabs(
    //getting data using ajaxOptions
    );
    $('#childtabs_2').tabs(
    //getting data using ajaxOptions
    );

親の下で 1 - 2 番目の子がクリックされたとします。親 2 をクリックしてから親 1 に戻ると、2 番目の子がまだ選択されています。親タブがクリックされるたびに最初の子を選択する必要があります。

私は他の投稿を読んで、使ってみました

  1. アンカー要素のクリック機能。お気に入り

    $('#tabs ul li a').click(function(){
   var parent = $('#tabs').tabs();
   $parent.tabs('select',0);
});

    動いていない。

  2. tabselect で bind を使用してみました。イベントバブルを引き起こし、機能していません。

    $('#tabs').bind(
        'tabsselect', 
        function(event, ui) {
            $("#tabLinks li a").on("click", function () { 
                $('#childTabLinks_0 li a').first().trigger("click"); 
            });     
        }
);

親が選択されるたびに最初の子が自動的に選択されるようにする解決策がある場合は共有してください。

4

1 に答える 1

0

tabselect 関数内にクリック関数は必要ありません。

$('#tabs').bind(
    'tabsselect',
        function() {
            $(this).children('.child-tabs').tabs('select',0);
        }
    }
); 

<div id="childtab_1">
   <div id="ct_1">
      <ul id="childTabLinks_1" class="child-tabs">
      ...
于 2013-03-28T12:38:24.890 に答える