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>

因此，当我点击第二个标签时，第一个标签显示div中的js内容，其中id - map未显示。虽然如果我按下firebug，这个div就会出现！

如何制作此内容？

Answer 1

首先 - 不要对不同的div使用相同的id（'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>

JS内容没有显示

2 个答案: