1

次のajaxがどのように機能するのかわかりませんでした（http://jqueryui.com/demos/tabs/ajax.htmlから）

<li class="ui-state-default ui-corner-top"><a
href="http://jqueryui.com/demos/tabs/ajax.html#ui-tabs-1">Tab 1</a>
</li>
<li class="ui-state-default ui-corner-top"><a
href="http://jqueryui.com/demos/tabs/ajax.html#ui-tabs-2">Tab 2</a>
</li>
<li class="ui-state-default ui-corner-top"><a
href="http://jqueryui.com/demos/tabs/ajax.html#ui-tabs-3">Tab 3(slow)</a>
</li>
<li class="ui-state-default ui-corner-top"><a
href="http://jqueryui.com/demos/tabs/ajax.html#ui-tabs-4">Tab 4(broken)</a>
</li>

.....

<div id="ui-tabs-1"
class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="ui-tabs-2"
class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>

たとえばタブ 2 をクリックすると、「http://jqueryui.com/demos/tabs/ajax.html#ui-tabs-2」に移動します。これは空の div であり、バックグラウンド コード (PHP など) はどのように行われたのでしょうか。 #ui-tabs-2 を取得してhttp://jqueryui.com/demos/tabs/ajax/content2.htmlを返し ました ありがとう

4

1 に答える 1

0

追加したコード スニペットは、 http://jqueryui.com/demos/tabs/ajax.htmlのサンプル ページに準拠していません。

次のようになります。

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">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>Proin elit arcu, rutrum commodo...</p>
</div>
</div>

最初のタブは ajax タブではありません。その他のタブは、ajax を介して動的に読み込まれます。hrefajax fetch のターゲット コンテンツを決定します。

于 2012-04-27T13:17:32.630 に答える