0

全て、

JQuery UI のネストされたタブを使用しています。次のような構造を考えてみましょう: 動物、鳥の 2 つのメイン タブがあります。動物の下には、「猫」、「犬」の 2 つのタブがあります。「猫」と「犬」の両方のタブをクリックすると、AJAX を介して読み込まれる必要があります。したがって、それらのコードは次のようになります。

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab"><span>Cats</span></a></li>
       <li><a href="/public/dogstab"><span>Dogs</span></a></li>
    </ul>  
</div>

<script type="text/javascript">
$(document).ready(function()
{
    $("#tabs-loading-message").show();
    $('#fragment-1').tabs({cache:false, spinner:''});
});
</script>

タブを「犬」に切り替えると、「猫」タブ用に生成された HTML がまだページに存在し (非表示の状態ですが、アクセス可能)、その逆であることに気付きました。したがって、両方のタブに共通の要素がある場合、それは問題になります.空のDivが1つしかなく、現在ロードまたは切り替えられているタブがロードされ、再描画されるように修正するにはどうすればよいですか?

4

2 に答える 2

0

うーん...私は間違っている可能性がありますが、各タブが動的に読み込まれたとしても、各タブのタブ コンテンツにはプレースホルダー div が必要だと思いました。そのようです：

<div id="fragment-1">
    <ul>
       <li><a href="/public/catstab#cats"><span>Cats</span></a></li>
       <li><a href="/public/dogstab#dogs"><span>Dogs</span></a></li>
    </ul>  
    <div id="cats"></div> <-- this is placeholder div
    <div id="dogs"></div>
</div>

URL の末尾にある追加の「#」識別子に注意してください。

于 2010-02-03T02:10:05.923 に答える
0

少し似たようなことを答えました。この投稿のコードは、タブをクリックすると、コンテンツをコンテンツ コンテナーに読み込みます。うまくいけば、それがあなたを正しい方向に導くでしょう。

于 2010-02-03T03:30:36.377 に答える