[英]tab is not being loaded - bootstrap tab
我有一个显示位置的页面。 我有两个标签,一个用于googmaps,一个用于天气。
例如,此位置http://www.places4two.de/location/date-in-mozart-stuben/45/
但是如果看到的话,如果切换到“天气”标签,则该标签未完全加载。 如果我首先启用天气标签,则googlemaps标签未完全加载。
我在这里做错了什么?
这是代码:
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
HTML
<div style="padding-left: 75px">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#lage">Lage</a></li>
<li><a href="#wetter">Wetter</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="lage">
<div id="map-canvas" style="max-width: 1100px; height: 350px"> </div>
</div>
<div class="tab-pane" id="wetter">
<div id="basicMap" style="max-width: 1100px; height: 350px"> </div>
</div>
</div>
非常感谢您的帮助
$('a[href="#lage"]').on('shown', function(e) {
google.maps.event.trigger(map, 'resize');
});
$('#myTab a[href="#lage"]').on('shown', function(){
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
});
在选项卡上调用地图时,需要调整地图的大小。
我用另一种方式解决了这个问题。
$(function(){
$('#wetter').hide();
$('#wetteron').click(function (e) {
e.preventDefault();
$('#lage').hide();
$('#wetter').show();
$('#lageon').parent('li').removeClass('active');
$(this).parent('li').addClass('active');
});
$('#lageon').click(function (e) {
e.preventDefault();
$('#wetter').hide();
$('#lage').show();
$('#wetteron').parent('li').removeClass('active');
$(this).parent('li').addClass('active');
});
});
添加了HTML
<li class="active"><a href="#lage" id="lageon">Lage</a></li>
<li><a href="#wetter" id="wetteron">Wetter</a></li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.