Pinterest小部件与jquery选项卡冲突
Pinterest widget conflict with jquery tabs
我试图把一个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();
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 使用放大弹出窗口与“自动滚动:假”冲突,整页.js的选项
- 引导选项卡和弹出框之间的冲突
- Maphilight 与 IE9 中的 Jquery 选项卡发生冲突
- Jquery轻松选项卡中页面之间的冲突,试图用Jquery noconflict解决
- 使用jquery.on()方法处理同一元素(选项标记)的两个脚本之间的冲突
- AngularJS与引导选项卡冲突
- 如何使用Javascript防止HTML元素选择选项中的冲突
- 谷歌地图和jquery选项卡冲突
- Pinterest小部件与jquery选项卡冲突
- Jquery选项卡不工作和Jquery切换冲突
- jQuery 选项卡中的冲突
- Flexslider startAt选项和directionNav似乎有冲突