我试图把一个Pinterest小部件到标签上我的网站使用jQuery，但它不显示任何东西。但是，当我把它放在标签之外时，它可以工作。
我使用这个jQuery代码:
<script="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
对于Pinterest(第二行就在body标签的上方):
<a data-pin-do="embedUser" href="http://pinterest.com/thisismycyprus/"></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
这是标签代码
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content"><h2>Tab 1</h2><p>Content </p></div>
<div id="tab2" class="tab_content"><h2>Tab 2</h2><p><a data-pin-do="embedUser" href="http://pinterest.com/thisismycyprus/"></a></p></div>
</div>
您已在 $(window).load(function(){ }); 中添加了脚本
//<![CDATA[
$(window).load(function(){
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});//]]>
我的答案是关于Pinterest/JQuery(不是JQuery标签)
我不得不在幻灯片中使用Pinterest feed小部件(http://business.pinterest.com/widget-builder/#do_embed_pin)，我得到了同样的错误:当div容器在页面加载时是display:none;, Pinterest内容为空。
我使用visibility:hidden;代替我的div容器，初始化我的幻灯片(在开始前等待4秒)，设置display:none;visibility:visible;，然后我可以使用JQuery show();/hide();