Question

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

当我点击地图标签的地图时，我想要显示谷歌地图。我写了一个函数来做到这一点，但是当用户点击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>

EDIT =有了请求，我上传了脚本标签，因为我的第三个标签默认打开，这是不可取的：

<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();
});

所以你的解决方案就是点击Maps标签，你需要显示它，所以你只需添加一个事件处理程序：

$('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);
  })();
});

Answer 2

$("a[href^='tabs']").click(function(){

     callAnyFunction();

});

这将从a开始从href中选择所有tabs（这可能意味着所有标签）。

Answer 3

您可以使用jquery one() 功能，当用户点击包含地图#tabs-3的标签时会触发一次，因为您想在第一时间初始化地图用户点击：

$('#tabs-3').one('click', function()
{
    //init map here
});

希望这有帮助。

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

3 个答案: