加載內容隱藏div後點擊

我爲前列腺癌組織志願者，我們有一個網站，其中嵌入了一些YouTube視頻。現在我們已經有很多了，即使每個視頻都隱藏在onClick div中，頁面在加載時也會陷入困境。加載內容隱藏div後點擊

問題：是否有一種簡單的方法可以讓div在點擊時加載內容？（即，頁面不會拉動YouTube嵌入，直到它被點擊觸發）

這裏是所有視頻的網頁，點擊任何一行來拉起我想要加載的內容點擊後：

這裏的代碼是什麼每個隱藏的div看起來像一個片段：

<p class="subHeader"> 
    <a onMouseOver="this.style.cursor='pointer';" onclick="toggle_visibility('nov14');$(this).text($(this).text() == '[+] New Drugs in the Prostate Cancer Clinic ' ? '[-] New Drugs in the Prostate Cancer Clinic ' : '[+] New Drugs in the Prostate Cancer Clinic ');">[+] New Drugs in the Prostate Cancer Clinic </a> 
</p> 
<div id="nov14" style='display:none;'> 
    <table width="400" style="background-color:#4f4f4f;border:3px solid #333;" align="center" cellpadding="5" cellspacing="5"> 
    <tr> 
     <td> 
     <iframe width="400" height="254" src="//www.youtube.com/embed/XvfzhBrK_SQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
     </td> 
    </tr> 
    </table> 
</div>

從this堆棧溢出後的反應似乎是正確的，但我不完全確定如何使它w ork與我上面的代碼。任何幫助將非常感謝我們所有的成員！

來源

2014-11-24 rhettoric

水木清華這樣的：http://www.labnol.org/internet/light-youtube-embeds/27941/ +你可以加載圖像的每個視頻：http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api – 2014-11-24 19:44:55

看看你在代碼結尾處有一個錯誤的標記。 – ianaya89 2014-11-24 19:48:48

@Glavić感謝分享，這很好，乾淨！唯一的問題是，它似乎沒有與我現有的onClick。檢查這個頁面：http://pccncalgary.org/v_archive_test2.php我已經嘗試了與前列腺癌（前列腺癌診所新葯），其他兩個保持與我的例子相同。任何想法如何使其工作？ – rhettoric 2014-11-24 20:39:03

您可以爲每個視頻製作不同的頁面。我不知道這是否是你想要的，但是如果你讓它們完全相同，並且每個鏈接都帶有隻有該視頻的不同頁面，則可以使其加載速度更快。

來源

2014-11-24 19:43:55 Taylor

如果您需要將HTML存儲在DOM中，則可以將其保存在textarea中。

警告：我沒有測試過這個。

<script> 
function toggle_visibility(var div){ 
    if(jQuery('#' + div).css('display') == 'none') { 
     //show it 
     //fetch html from the textarea and load into the lonely div, then show the parent div. 
     var htmlFromTextarea = jQuery('#' + div + ' textarea').val(); 
     jQuery('#' + div + ' div').html(htmlFromTextarea).parent().show(0); 
    } else { 
     //hide it and clear the div to unload 
     jQuery('#' + div).hide(0).find('div').html(''); 
    } 
} 
</script> 
<p class="subHeader"> 
    <a onMouseOver="this.style.cursor='pointer';" onclick="toggle_visibility('nov14');$(this).find('.expander').html($(this).find('.expander').html() == '[+]' ? '[-]' : '[+]');"> 
     <span class="expander">[+]</span> New Drugs in the Prostate Cancer Clinic 
    </a> 
</p> 
<div id="nov14" style='display:none;'> 
    <textarea style='display:none;'><table width="400" style="background-color:#4f4f4f;border:3px solid #333;" align="center" cellpadding="5" cellspacing="5"> 
    <tr> 
     <td> 
      <iframe width="400" height="254" src="//www.youtube.com/embed/XvfzhBrK_SQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
     </td> 
    </tr> 
    </table></textarea> 
    <div></div> 
</div>

來源

2014-11-24 19:51:59 James

上面假設正在使用jQuery。 – James 2014-11-24 19:53:13

謝謝詹姆斯，我喜歡這種方法，但我似乎無法讓它工作。 onClick div不加載後。這裏是我已經加載的頁面：http://pccncalgary.org/v_archive_test.php（我只做了第一個，「前列腺癌診所的新葯」）。 – rhettoric 2014-11-24 20:24:18

加載內容隱藏div後點擊

回答

相關問題