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加載頁面的特定內容？

回答

相關問題