jquery-ui-tabs - JQuery UI タブのコンテンツは、生成されたコンテンツ div 内に読み込まれませんか?

Question

これが私のコードです：

<div class="tabs">
<ul>
    <li><a href="#tabs-1">tab1</a></li>
    <li><a href="#tabs-2">tab2</a></li>
    <li><a href="#tabs-3">tab3</a></li>
    <li><a href="#tabs-4">tab4</a></li>
</ul>
   <div id="tabs-1">
      tab1
   </div>
   <div id="tabs-2">
      tab2
  </div>
   <div id="tabs-3">
      tab3
   </div>
   <div id="tabs-4">
      tab4
   </div>
</div>
<script>$(function() { $( ".tabs" ).tabs(); });</script>

タブのタイトルは問題ありませんが、コンテンツが正しく表示されません。スクリーンショットを次に示します

firebug のコードを表示すると、コンテンツ タブが読み込まれているのにコンテンツが含まれていないことがわかりました。これを解決するには？

Answer 1

スクリプトタグで次のことを試してください。

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

スクリプトでクラスセレクターを使用しようとしているようです。