JQuery UI嵌套選項卡 - 將AJAX內容加載到單個DIV中

我正在使用JQuery UI嵌套選項卡。考慮這樣的結構：有2個主標籤：動物，鳥類。在動物下，有兩個標籤「貓」，「狗」。這兩個選項卡「貓」和「狗」應通過AJAX點擊時被加載。所以，對他們的代碼是這樣的：

<div id="fragment-1"> 
    <ul> 
     <li><a href="/public/catstab"><span>Cats</span></a></li> 
     <li><a href="/public/dogstab"><span>Dogs</span></a></li> 
    </ul> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $("#tabs-loading-message").show(); 
    $('#fragment-1').tabs({cache:false, spinner:''}); 
}); 
</script>

當我切換標籤爲「狗」，我注意到，爲「貓」選項卡生成的HTML仍然存在於頁面上（處於隱藏狀態，但仍可訪問）和Vice Versa。所以如果兩個選項卡都有共同的元素，那將是一個問題。我該如何解決這個問題，使得只有一個空的Div，並且它被加載並重新繪製了當前加載或切換的任何選項卡？

來源

2010-02-02 Jake

嗯...我可能是錯的，但我認爲你需要每個標籤的標籤內容的佔位符div，即使每個標籤都是動態加載的。像這樣：

<div id="fragment-1"> 
    <ul> 
     <li><a href="/public/catstab#cats"><span>Cats</span></a></li> 
     <li><a href="/public/dogstab#dogs"><span>Dogs</span></a></li> 
    </ul> 
    <div id="cats"></div> <-- this is placeholder div 
    <div id="dogs"></div> 
</div>

請注意網址末尾的附加'＃'標識符。

來源

2010-02-03 02:10:05 btelles

我回答了一些有點類似的東西。當您單擊選項卡時，this post中的代碼將內容加載到內容容器中。希望它能讓你朝着正確的方向前進。

來源

2010-02-03 03:30:36 Mottie

JQuery UI嵌套選項卡 - 將AJAX內容加載到單個DIV中

回答

相關問題