動的にロードされたjQueryのタブを誰かがクリックするまで閉じたままにするにはどうすればいいですか？

Question

<script> 
$(function() { 
    $("#tabs").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html(
        "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
        "If this wouldn't be a demo."); 
      } 
     } 
    }); 
}); 
</script> 



<div class="demo"> 

    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">Name</a></li> 
      <li><a href="#tabs-2">Address</a></li> 
     </ul> 
     <div id="tabs-1"> 
      <div id="dynamicContent"> 
       John Doe 
      </div> 
     </div> 
     <div id="tabs-2"> 
      Cupertino, California 
     </div> 
    </div> 

</div><!-- End demo --> 

ページロード後にajax呼び出しを使用してdynamicContentをロードしています。

データがロードされると、div要素の上部にある素敵な色、スタイルタブが番号なしリストに置き換えられます：

- Name 
- Address 

私はAjaxの呼び出しが完了した後に選択されていないようにタブをリセットしてみました：

$("#tabs").tabs({ selected: -1 }); 

しかし、これは機能しません。

他に何か試してみませんか？

Answer 1

{selected: -1}で動作するはずです。 working demoを参照してください。ここでは、jsfiddleサイトのドキュメント情報タブを表示するAJAX &を使用して、名前タブを読み込みます。

あなたのスタイルシートやクラスがタブエフェクトの除去を引き起こすajaxレスポンスによって上書きされているようです。

FF + Firebugの場合、コンテンツがAJAXによって読み込まれ、そのクラスがチェックされた後、順序付けられていないリストを調べてください。