2

jQuery UIの.tabs（）を使用してAJAXを介してコンテンツを取得しようとしていますが、デフォルトの動作では、ページ全体のコンテンツを取得します。特定の#idや複数の#idからコンテンツを取得するにはどうすればよいですか？

load:イベント（http://docs.jquery.com/UI/Tabs#event-load）を使用する必要があると感じていますが、これを理解するための支援が必要です。

例：

タブ付きコンテンツを取得および表示しているタブのあるページ。コンテンツの特定の領域を取得するために、最初の#the_tabsリンクの後に#contentを配置して取得しようとしましたが、ページ全体がまだ読み込まれています。

<div id="tabs">

    <div id="tabs_display">

    </div>

    <ul id="the_tabs">
        <li><a href="testcontent.html#content" title="tabs display"><span>1</span></a></li>
        <li><a href="testcontent2.html" title="tabs display"><span>2</span></a></li>
        <li><a href="testcontent.html" title="tabs display"><span>3</span></a></li>
        <li><a href="testcontent2.html" title="tabs display"><span>4</span></a></li>
   </ul>

</div><!-- /#tabs -->

前のマークアップによって取得されているページ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Remote HTML Page Example</title>
    </head>
    <body>
        <div id="content">
            I want this content
        </div>
        <div id="other_stuff">
            Not this content    
        </div>
    </body>
</html>

JS（セットアップ用）：

$(document).ready(function(){

    /* Tabs
    --------------------*/
    $(function() {

        var $tabs = $('#tabs').tabs({

        });

    });

});
4

3 に答える 3

3

Jquery-UI 1.9では、「ajaxOptions」は減価償却されます。代わりに、以下のコードが機能しました：（ref：http: //jqueryui.com/upgrade-guide/1.9/#deprecated-ajaxoptions-and-cache-options-added-beforeload-event）

$(function() {
    $( "#the_tabs" ).tabs({
            beforeLoad: function( event, ui ) {
                    ui.ajaxSettings.dataType = 'html';
                    ui.ajaxSettings.dataFilter = function(data) {
                            return $(data).filter("#content").html();
                    };
            }      
    });
});
于 2013-03-07T11:10:14.790 に答える
1

$（document）.ready（function（）{

/* Tabs
--------------------*/
var $tabs = $('#the_tabs').tabs({
    ajaxOptions: {
        dataFilter: function(data, type){
            return $(data).filter("#content").html();
        }
    }
});

}）;

irc.freenode.netの#jqueryでSupavisahに解決策を提案します

于 2009-10-11T01:34:13.587 に答える
1

.filterではなく.findを使用して運が良かった。このような：

$(document).ready(function(){
$('#the_tabs').tabs({           
        ajaxOptions: {
                cache : true,
                dataFilter: function(data){
                        return $(data).find('#content');
                },
        }
});    
});
于 2011-01-29T17:15:00.093 に答える