谷歌地图和jquery选项卡冲突
Conflict between google map and jquery tab
我在wordpress和jQuery中使用了easy2map插件,如下图
模板文件:
<ul id="tabs">
<li><a href="#" name="#tab1">Own Unit</a></li>
<li><a href="#" name="#tab2">Franchise Unit</a></li>
</ul>
<div id="tabbed-content">
<div id="tab1">
//short code of map 1
</div>
<div id="tab2">
//short code of map 2
</div>
</div>
:
<script type="text/javascript">
var map=jQuery.noConflict(true);
function resetTabs(){
map("#tabbed-content > div").hide(); //Hide all content
map("#tabs a").attr("id",""); //Reset id's
}
var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2
var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab
(function(){
map("#tabbed-content > div").hide(); // Initially hide all content
map("#tabs li:first a").attr("id","current"); // Activate first tab
map("#tabbed-content > div:first").fadeIn(); // Show first tab content
map("#tabs a").on("click",function(e) {
e.preventDefault();
if (map(this).attr("id") == "current"){ //detection for current tab
return
}
else{
resetTabs();
map(this).attr("id","current"); // Activate this
map(map(this).attr('name')).fadeIn(); // Show content for current tab
}
});
for (i = 1; i <= map("#tabs li").length; i++) {
if (myUrlTab == myUrlTabName + i) {
resetTabs();
map("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
map(myUrlTab).fadeIn(); // Show url tab content
}
}
})()
我的问题是,地图得到完全加载在tab1,但不是在tab2....请帮帮我!!
使用position absolute来隐藏制表符
position: absolute;
left: -9999px;
top: -9999px;
代替display: none;
because in case with display: none;Js-code将无法运行(或与firebug检查-可能是它只是计算错误的宽度/高度地图视窗,当地图初始化)
相关文章:
- 我的单元测试选项是什么
- 如何更改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似乎有冲突