0

divjQuery UI ajax タブの上にコンテンツを配置しようとしています。jQuery UI for ajax は、などdivの ID を持つ を自動的に作成し、UI タブ リストの下に配置します。タブの上にajaxを介して取得したコンテンツを配置したい。ui-tabs-1ui-tabs-2div

脚本 -

<script>
$(function() {
    $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error(function() {
                ui.panel.html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
            });
        }
    });
});
</script>

HTML -

<div id="content"></div> <!-- i would like the content to be displayed here-->

<div id="tabs">
<ul>    
    <li><a href="content1.html">Tab 1</a></li>
    <li><a href="content2.html">Tab 2</a></li>
    <li><a href="content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="content4-broken.php">Tab 4 (broken)</a></li>
</ul>

</div>

私は何をすべきか?

4

2 に答える 2

0

のようなdivを作成する

<div id="content">
<div id="uitabs-1">
</div> <!-- i would like the content to be displayed here-->

<div id="tabs">
<ul>    
    <li><a href="content1.html">Tab 1</a></li>
    <li><a href="content2.html">Tab 2</a></li>
    <li><a href="content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="content4-broken.php">Tab 4 (broken)</a></li>
</ul>

</div>
于 2013-03-13T13:29:44.340 に答える
0

jquery UI タブの使用createイベント:

$("#tabs").tabs({
    create: function (event, ui) {
        $('.ui-tabs-panel').prependTo('.ui-tabs-nav');
    }
});

デモ: http://jsfiddle.net/Xh8nc/1/

于 2013-03-13T13:33:18.803 に答える