Jquery ui jqueryui.tabs ajax是否加载页面的特定内容？

我试图使用jQueryUI的.tabs（）通过AJAX获取内容，但默认行为是获取整个页面的内容我如何从特定id和/或多个id获取内容？

我觉得我需要使用

load:

event（），但我需要一个帮助来解决这个问题

例如：

包含选项卡的页面，用于获取和显示选项卡式内容。我已将#content放在第一个#要检索的#tabs链接之后，试图获取该内容的特定区域，但整个页面仍处于加载状态

<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 -->

$（文档）.ready（函数（）{

}))

---

在irc.freenode.net上的#jquery中支持Supavisah的解决方案

我很幸运地使用了.find，而不是.filter。像这样：

$(document).ready(function(){
$('#the_tabs').tabs({           
        ajaxOptions: {
                cache : true,
                dataFilter: function(data){
                        return $(data).find('#content');
                },
        }
});    
});

在jQueryUI1.9中，“ajaxOptions”被折旧；因此，下面的代码对我很有用： （参考号：）

更新：返回$（数据）。查找（“#内容”）；对我来说也更有效。是使用过滤器还是查找，似乎取决于返回的HTML的结构：

$(document).ready(function(){

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

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

        });

    });

});

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

$(document).ready(function(){
$('#the_tabs').tabs({           
        ajaxOptions: {
                cache : true,
                dataFilter: function(data){
                        return $(data).find('#content');
                },
        }
});    
});

$(function() {
    $( "#the_tabs" ).tabs({
            beforeLoad: function( event, ui ) {
                    ui.ajaxSettings.dataType = 'html';
                    ui.ajaxSettings.dataFilter = function(data) {
                            return $(data).filter("#content").html();
                    };
            }      
    });
});