jquery-ui .tabs ajax加载页面的特定内容？

我想使用jQuery UI的.tabs（）通过AJAX获取内容，但默认行为是获取整个页面的内容。 我将如何获取特定#id和/或多个＃号的内容？jquery-ui .tabs ajax加载页面的特定内容？

我有一种感觉，我会需要使用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({ 

     }); 

    }); 

});

来源

2009-10-10 tester

在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-07 11:10:14

感谢保持此最新消息！ – tester 2013-03-08 18:08:03

更新：返回$（data）.find（'＃content'）;在我的情况下也工作得更好。是否使用过滤器或查找，似乎取决于HTML返回的结构： http://stackoverflow.com/questions/4245231/how-do-i-filter-the-returned-data-from-jquery-阿贾克斯 – 2013-03-11 10:46:23

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

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

}）;

解决方案道具Supavisah在#jquery irc.freenode.net上

来源

2009-10-11 01:34:13 tester

我一直在使用.find有运气，而不是.filter。像这样：

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

来源

2011-01-29 17:15:00 wjdennen

jquery-ui .tabs ajax加载页面的特定内容？

回答

相关问题