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>