JS內容沒有顯示

Question

我有幾個使用jquery函數tabs（）;

<div class="vtabs"> 
    <a href="#tab1">Tab1</a> 
    <a href="#tab2">Tab2</a> 
</div> 

<div id="tab1" class="vtabs-content"> 
    Any html content 
</div> 

<div id="tab2" class="vtabs-content" style="display:none"> 
    <div id="map" style="width: 400px; height: 200px"></div> 
</div> 


    <script type="text/javascript"><!-- 
    $('.vtabs a').tabs(); 
    //--></script> 

<script type="text/javascript"> 
     ymaps.ready(init); 

     function init() { 
      ymaps.geocode('', { results: 1 }).then(function (res) { 
       var firstGeoObject = res.geoObjects.get(0); 
       window.myMap = new ymaps.Map("map", { 
        center: firstGeoObject.geometry.getCoordinates(), 
        zoom: 17 
       }); 
      . 
      . 
      . 
    </script> 

因此，第一個選項卡顯示時，我單擊第二個選項卡js內容與ID - 地圖不顯示。雖然如果我按下螢火蟲這個div一切都會出現！

如何顯示此內容？

Answer 1

首先的 - 不要使用相同的ID，用於不同的div（「TAB1」）

Answer 2

請確保您有唯一的ID的，並把一切DIV中

<div id="vtabs"> 
<a href="#tab1">Tab1</a> 
<a href="#tab2">Tab2</a> 


<div id="tab1" class="vtabs-content"> 
    Any html content 
</div> 

<div id="tab2" class="vtabs-content" > 
    <div id="map" style="width: 400px; height: 200px"></div> 
</div> 
</div> 


<script> 
    $(function() { 
     $("#vtabs").tabs(); 
    }); 
</script>