0

我有几个用 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>

因此，当我单击第二个选项卡时，会显示第一个选项卡，其中 id 的 js 内容 - 地图未显示。虽然如果我按下萤火虫这个 div 一切都会出现！

如何使此内容显示？

4

2 回答 2

0

确保您有唯一的 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>
于 2012-11-20T09:19:31.927 回答
0

首先 - 不要为不同的 div 使用相同的 id ('tab1')

于 2012-11-20T09:02:35.203 回答