Question

我正在尝试使用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({

        });

    });

});

Answer 1

在Jquery-UI 1.9中，“ajaxOptions”被折旧;所以相反，下面的代码为我工作：（参考：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();
                    };
            }      
    });
});

Answer 2

（文档）$。就绪（函数（）{

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

}）;

在irc.freenode.net的#jquery中解决道具 Supavisah

Answer 3

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

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

jquery-ui .tabs ajax加载页面的具体内容？

3 个答案: