加载内容隐藏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后点击

回答

相关问题