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”已被贬值；所以下面的代码对我有用：（参考：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

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

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

$(文档).ready(函数(){

/* 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 回答