jQuery UIタブを使用してajax経由で外部divをロードする方法

Question

私はJQuery UIのタブ機能を使用してajax経由でコンテンツを読み込みます。私は、ページ全体ではなく、特定のdivをajax呼び出しにロードしたいと思います。これはjQueryのload（）を使用せずに可能ですか？

コードからわかるように、これはストック標準の基本的なjQueryタブ実装ですが、私は完全なページではなく特定のdivを必要としています。

は、ここに私のhtmlです：

<div id="tabs"> 
    <ul> 
     <li><a href="tab-1">Tab One</a></li> 
     <li><a href="tab-2">Tab Two</a></li> 
     <li><a href="http://www.domain.com #target">Ajax tab</a></li> 
    </ul> 

    <div id="tab-1>Tab one content</div> 
    <div id="tab-2>Tab two content</div> 
</div> 

とインラインスクリプト：これが可能であれば

<script> 
    $(function() { 
     $("#tabs").tabs();  
    }); 
</script> 

誰もが知っていますか？

Answer 1

Nathan。

はい、可能です。 jQuery ajax "load"関数を使用します。例：あなたは手動でも、あなたが必要とするロードされたページの正確一部のセレクタを定義することができ、AJAX呼び出しを介してコンテンツをロードする必要があり、あなたの第三タブの

$('#result').load('ajax/test.html #container'); 

。したがって、一般的な方法で3番目のタブを作成し、3番目のタブのページコンテンツを読み込んでタブを作成します。また、ユーザーがタブをクリックしたときに、3番目のタブのコンテンツを動的に読み込むこともできます。

詳細情報はhttp://api.jquery.com/load/です。「ページフラグメントの読み込み」の段落を参照してください。