javascript - 单击选项卡时如何调用函数？

Question

所以我正在使用 jquery ui 中的选项卡小部件。我有 3 个选项卡:详细信息、住宿和 map 。当我点击详细信息和住宿时，它会显示我在那里写的文本。

当我单击 map 选项卡时，我希望显示谷歌地图。我编写了一个函数来执行此操作，但当用户单击“ map ”选项卡时它不会显示。

我已经加载了正确的 gmpas 插件，因为此代码可以在我的其他 html 页面上运行。这是我的谷歌地图功能:

(function googleMaps(){
        var mapCanvas = document.getElementById('map');
         var mapOptions = {
                  center: new google.maps.LatLng(29.099332, -110.980656),
                  zoom: 17,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                  }
                  var map = new google.maps.Map(mapCanvas, mapOptions);
        });

这是我的标签:

<div id="tabs">
  <ul>
     <li><a href="#tabs-1">Description</a></li>
     <li><a href="#tabs-2">Accomodation</a></li>
     <li><a href="#tabs-3">Map</a>

     </li>
  </ul>
  <div id="tabs-1">
     <p>some other text</p>
  </div>
  <div id="tabs-2">
     <p>some text</p>
  </div>
  <div id="tabs-3">
        <div id="map">

        </div>
  </div>

编辑=根据请求，我上传脚本标签，因为我的第三个选项卡默认打开，这是不可取的:

<script>
    (function(){
        var bootstrapButton = $.fn.button.noConflict();
        $.fn.bootstrapBtn = bootstrapButton;
    }());



        $('a[href="#tabs-3"]').one("click", function () {
  (function googleMaps(){
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      center: new google.maps.LatLng(29.099332, -110.980656),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    document.getElementById("map").innerHTML = map;
    $("#tabs-1").show()
  })();
});


    var slideshow = $(".pgwSlider1").pgwSlideshow({
        transitionEffect: 'fading',
        autoSlide: true
    });
    $(function() {
       $( "#tabs" ).tabs();
    }); 
    </script>

我确实有其他插件，例如 pgwSlider。他们工作得很好。

Answer 1

使用这种方式:

$("a[href^='tabs']").one("click", function(){
    initMaps();
});

因此，您的解决方案是单击“ map ”选项卡，您需要显示它，因此您只需为此添加一个事件处理程序即可:

$('a[href="#tabs-3"]').one("click", function () {
  (function googleMaps(){
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      center: new google.maps.LatLng(29.099332, -110.980656),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
  })();
});