は自動的にajax読み込みコンテンツを読み込みます（jquery UIタブ）

Question

私はjQuery UI Tabsを使用して、ユーザーがタブをクリックしたときにAjax経由でコンテンツを読み込みます。私が望むのは、ユーザーがタブをクリックすることなくページが読み込まれたときに自動的に最初のタブのコンテンツを読み込むことです。これをどのように達成するのですか？

あなたは

Answer 1

だけでページのロードの最初のタブ（0）のタブの読み込みメソッドを呼び出してありがとう：

$(function() { 
    $("#tabs").tabs("load" , 0); 
} 

はこれだけのコンテンツをロードします。タブを選択する場合は、コンテンツを読み込むselectを使用します。

$(function() { 
    $("#tabs").tabs("select" , tabIndex); 
} 

編集：デフォルトのタブロードしている場合、これは必要ではないはず

$(function() { 
    $("#tabs").tabs("option", "active", tabIndex); 
} 

デモ：jQueryのの新しいバージョンのを、あなたはactiveオプションを使用する必要があります。 http://jsfiddle.net/jtbowden/8zkfrbee

Answer 2

$(document).ready(function(){ 
    $("#tabs").tabs("load" , 0); 
}); 

コンテンツを事前に保存することもできますid="tabs-1"を持っていますが、事前にロードされたアプローチを使用するならば、あなたは内の要素を含めることができますように見えます

<li><a href="#tabs-1">First tab</a><li> 

Answer 3

を使用する代わりに<li>の内側にあなたの最初の<a>にURLを使用する必要はありません。最初のdivの内側にDED ajaxを使用したくない場合は、上部のタグ要素を使用してタブを設定します。テキストを含む要素のIDは、タブのアンカータグと一致する必要があります。

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

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Preloaded</a></li> 
     <li><a href="#tabs-2">Tab 1</a></li> 
     <li><a href="ajax/content2.html">Tab 2</a></li> 
     <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> 
     <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Hello, Tab One.</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Hello, Tab Two.</p> 
    </div> 
</div>