選項卡未加載 - 引導選項卡

Question

我有一個顯示位置的頁面。在那裏我有兩個選項卡，一個用於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> 

感謝很多幫助

Answer 1

$('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); 
    }); 

您需要在選項卡時調用它來調整地圖的大小。

Answer 2

我以另一種方式解決了這個問題。

$(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>