javascript - JS コンテンツが表示されない

Question

jquery function 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>

したがって、2番目のタブをクリックすると、最初のタブが表示され、idを持つdivのjsコンテンツが表示されません-マップは表示されません。firebugを押すと、このdivがすべて表示されます。

このコンテンツを表示するにはどうすればよいですか?

Answer 1

まず第一に、異なる div ('tab1') に同じ ID を使用しないでください。

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>