jQueryUI選項卡...將內容添加到非活動選項卡，當點擊/激活選項卡時，內容保持隱藏狀態

嘿，所有...我有一個jQueryUI選項卡實現，非常簡單，工作正常。那麼，是:)jQueryUI選項卡...將內容添加到非活動選項卡，當點擊/激活選項卡時，內容保持隱藏狀態

我將內容附加到其中一個選項卡，而選項卡處於非活動狀態。當我點擊標籤時，內容不可見。 Firebug顯示它在那裏，但顯示的CSS屬性：無。我想象當一個選項卡處於非活動狀態時，其中的所有內容都設置爲display：none;並且當單擊該選項卡時，該內容被設置爲顯示：block（或內聯，不知道是哪個）。我假設因爲我在頁面加載後追加了額外的內容，jQuery並沒有「意識到」它。所以猜測我需要在那裏工作.live（）方法，但不知道在哪裏，因爲它似乎我不得不操縱jQuery選項卡代碼本身？

真的沒有任何相關的代碼發佈，因爲它都非常簡單...但如果有人認爲它會有所幫助，我會在這裏拋出一些片段。

總結......如果使用jQuery的.append（）將數據附加到當前處於非活動狀態的jQueryUI選項卡的節點上......如何在標籤變爲活動狀態時獲取該數據以顯示該數據？

謝謝！

來源

2010-11-29 charliegriefer

它應該與append()和jQuery UI。你確定你只將數據附加到標籤數據容器嗎？我想你只是在做類似working demo的事情。

來源

2010-11-29 05:29:13

確實，它確實有效。我有代碼操縱選項卡內的另一個節點，根據該節點的類名稱，並沒有意識到我追加的節點也具有相同的類名:(我只是假定它沒有顯示，因爲它是動態追加的。感謝您驗證它應該如何阻止我繼續尋找解決方案的錯誤途徑。 – charliegriefer 2010-11-29 05:43:41

你是正確的，當一個標籤被隱藏時，它被設置爲display：none;當它不是時，它被設置爲顯示：block ;.我測試了你的技術（使用jQuery的append（）），它對我來說工作正常。這裏是我的測試代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" /> 
</head> 
<body> 
    Enter some HTML and hit Enter: <input id="add-content" style="width: 300px;" /><br /><br /> 
    <div id="tabs"> 
     <ul> 
      <li><a href="#tabs-1">Nunc tincidunt</a></li> 
      <li><a href="#tabs-2">Proin dolor</a></li> 
      <li><a href="#tabs-3">Aenean lacinia</a></li> 
     </ul> 
     <div id="tabs-1"> 
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
     </div> 
     <div id="tabs-2"> 
      <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
     </div> 
     <div id="tabs-3"> 
      <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
      <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
     </div> 
    </div> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
    <script> 
     (function ($) { 
      $("#tabs").tabs(); 

      $('#add-content').change(function (e) { 
       var $this = $(this); 
       $('#tabs-2').append($this.val()); 
       $this.val(''); 
      }); 

     } (jQuery)); 
    </script> 
</body> 
</html>

如果你輸入一些HTML到輸入框中，然後轉到第二個選項卡，你會看到它追加到第二個選項卡。

來源

2010-11-29 05:34:21

jQueryUI選項卡...將內容添加到非活動選項卡，當點擊/激活選項卡時，內容保持隱藏狀態

回答

相關問題