jQuery UI選項卡：如何從不同頁面加載特定元素？

我設置了jQuery UI選項卡，但我遇到的問題是指向不同頁面的鏈接，它們將頁面的所有內容加載到選項卡中。這包括頁腳，標題和其他我不想在選項卡中顯示的導航欄。如果我只想從該頁面加載一個ID，該怎麼辦？jQuery UI選項卡：如何從不同頁面加載特定元素？

我的選項卡設置是這樣的：

<div id="mytabs"> 
<ul> 
<li><a href="derpsite.com/awesomepage">Awesome page</a></li> 
<li><a href="derpsite.com/foo">Foo</a></li> 
</ul> 
</div>

沒什麼事情在jQuery的...

$(function() { 
$("#mytabs").tabs(); 
});

比方說，這是「awesomepage」的HTML（第一鏈接目標）：

<html> 
<head> 
<title>awesome page</title> 
</head> 
<body> 
<div id="header">bla</div> 
<div id="awesomeness">awesomeness!</div> 
<div id="footer">fdsfd</div> 
</body> 
</html>

...而我只希望標籤從頁面加載#awesomeness。我會如何去做這件事？我已閱讀了一些向HTML添加data-target="#youridhere"屬性的指南，但我仍對如何實現javascript感到困惑。看起來這是一個方便的解決方案，因爲我不會在每個頁面中定位相同的ID。任何關於如何讓JavaScript工作的線索？

在此先感謝！

來源

2012-12-14 Michelle

您是否曾嘗試將數據目標放在選項卡鏈接上，爲目標頁面上的元素指定一個有效的CSS選擇器？這只是一個瘋狂的猜測，但如果你指的是準確的，那似乎是使用該功能的最可能的方式。 –

@DavidFells我試過了，但不幸的是，'data-target =「＃blabla」'仍然會在標籤中給出整個頁面。我試着用一堆不同的CSS選擇器來確保。是否需要添加外部JavaScript才能使其發揮作用？ – Michelle

我不知道數據目標是否可以工作，但我在官方文檔中找不到任何內容。還有另一種解決方案，使用回調來處理您的內容（刪除未使用的內容）：load：function（event，ui）{}。它效率較低，但可能是一個臨時解決方案 – MatRt

得到了解決:)使用的答案作爲參考點之一，突出部現在可以加載在data-target屬性指定單個元素。這裏是修改後的版本：

$(function() { 
$('#tabs').tabs(
{ 
beforeLoad: function(event, ui) { 
if (ui.panel.children().size() > 0) 
    return false; 
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target')); 
return false; 
} 
}); 
});

來源

2012-12-15 07:42:17 Michelle

允許加載響應的部分代碼的函數是$ .load（）函數。不幸的是，tabs（）功能不使用此功能，而是使用$ .ajax代替。

你可以試試這個解決方案：

您可以嘗試停止對beforeLoad回調默認的處理和管理與$ .load（）方法的Ajax調用。

（在1.9文檔的基礎上，你可能要適應）

$('#tabs').tabs({ 

// Callback run when selecting a tab 
beforeLoad: function(event, ui) { 

    // If the panel is already populated do nothing 
    if (ui.panel.children().size() > 0) 
     return false; 

    // Make your own ajax load (with fragment feature) 
    ui.panel.load(ui.tab.attr('href') + ' #yourFragment'); 

    // stop the default process (default ajax call should not be launched) 
    return false; 
});

注意：我不知道有ui.tab.attr('href')提取URL，檢查之前什麼對象是ui.tab，但它應該是很容易檢索href參數。

好運

來源

2012-12-14 05:24:02 MatRt

非常感謝！除了你提到的有關URL提取的部分外，這個工作得很好。控制檯給了我一個404。一切正常，當我用完整的url來代替'ui.tab.attr（ 'href'）'。閱讀完文檔後，我實際上仍然不知道如何去解壓URL - 任何線索？ – Michelle

jQuery UI選項卡：如何從不同頁面加載特定元素？

回答

相關問題