[英]Pinterest widget conflict with jquery tabs
我正在尝试使用jQuery将Pinterest小部件放入网站上的标签中,但未显示任何内容。 但是,当我将其放在选项卡之外时,它可以工作。
我正在使用此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(){ });
添加了脚本$(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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.