4

jQuery UI 1.7.2 を使用してその場でタブを追加しようとしています。まず、タブに属するコンテンツを保持する div を作成し、次に $('#tabs').tabs("add",...) を呼び出します。jQuery UI は、タブ リストに新しい li を正しく追加します。ただし、タブ div にクラス属性を作成する代わりに、偽の ID を持つまったく新しいタブ div を作成し、その上にクラスを作成します。

生成されるマークアップは次のとおりです。

<div id="tabs" class="ui-tabs ui-widget ui-widget-content">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  <li class="ui-state-default"><a href="#ui-tabs-41"><span>Tab 1</span></a></li>
  <li class="ui-state-default"><a href="#ui-tabs-36"><span>Tab 2</span></a></li>
  <li class="ui-state-default"><a href="#ui-tabs-27"><span>Tab 3</span></a></li>
  </ul>

  <div id="MyTab1"><img src="/1.jpg"/></div>
  <div id="ui-tabs-41" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
  <div id="ui-tabs-36" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
  <div id="ui-tabs-27" class="ui-tabs-panel ui-widget-content"/>
  <div id="MyTab2"><img src="/2.jpg"/></div>
  <div id="MyTab3"><img src="/3.jpg"/></div>

MyTab1 などの div は、タブにしたいものです。ui-tabs-41 のような div は、jQuery UI が独自に生成することを決定したものです...その理由はわかりません。

4

2 に答える 2

4

どうやら、最初に $('#tabs').tabs("add", "#MyTab1", ...) を呼び出してから、コンテンツを #MyTab1 に挿入する必要があるようです。jQuery UI は、既存の #MyTab1 コンテナーを取得してタブに変換することはできません。これは、jQuery UI ドキュメントから明らかではありません。

于 2010-01-11T05:43:53.903 に答える
0

うーん、完全にはわかりませんが、li>a like にタイトルタグを追加すると、ドキュメントを読むまでは同じ問題がありました。

   <div id=tabs>
   <ul>
   <li><a href="#Tab1" title="Tab1">Tab 1 Head</a></li>
   </ul>
    <div id=Tab1>tab 1 content</div>
   </div>

事前定義された div を使用し、他のものを追加しません (つまり、 $("#tabs").tabs() ) は「追加」などなしで正常に動作します (とにかく私のために働いた)。わからない、多分それは誰かを助ける

于 2011-12-08T14:35:51.390 に答える