6

我对简单的 jQuery 选项卡中包含的 Google 地图有一点问题。

下面我粘贴了代码：

jQuery：

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active"); 
        $(".tab_content").hide(); 
        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).fadeIn();
        return false;
    });

});

这是选项卡的 HTML：

<div class="bluecontainer">
    <ul class="tabs">
        <li><a href="#tab1">Tab1</a></li>
        <li><a href="#tab2">Tab2</a></li>
        <li><a href="#tab3">Tab3</a></li>
        <li><a href="#tab4">Tab4</a></li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <h2>Tab1</h2>
        </div>
        <div id="tab2" class="tab_content">
            <h2>Tab2</h2>
        </div>
        <div id="tab3" class="tab_content">
            <div>
                google Map
            </div>
        </div>
        <div id="tab4" class="tab_content">
            <h2>Tab4</h2>
        </div>
    </div>
</div>

我真的不知道该怎么办。这是谷歌地图的普遍问题还是我的标签有问题？但是他们在其他所有方面都工作得很好。

提前谢谢你的帮助

4

8 回答 8

7

我已经解决了这个问题。

将 jQuery 中的 hide() 更改为 css.visibility，因此选项卡看起来像这样。

$(document).ready(function() {

    //Default Action
    $(".tab_content").css({'visibility':'hidden'  , 'position':'absolute'});
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); 

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active"); 
        $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); 
        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).css({'visibility':'visible'  , 'position':'static'});
        return false;
    });

});

一切正常。

于 2010-06-14T15:23:26.917 回答
6

Bootstrap3：https ://github.com/twbs/bootstrap/issues/2330

$('a[href="#edit_tab_map"]').on('shown.bs.tab', function(e)
    {
        google.maps.event.trigger(map, 'resize');
    });
于 2014-05-30T09:46:34.527 回答
4

我采用了不同的方法 - 在激活选项卡后初始化地图。这是我的代码：

//Default Action
jQuery(".tab_content").hide(); //Hide all content
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
jQuery(".tab_content:first").show(); //Show first tab content

//On Click Event
jQuery("ul.tabs li").click(function() {
    jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
    jQuery(this).addClass("active"); //Add "active" class to selected tab
    jQuery(".tab_content").hide(); //Hide all tab content
    var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    jQuery(activeTab).fadeIn(); //Fade in the active content
    if(activeTab == '#location_tab') {      
        initialize();
    }
    return false;
});

确保带有地图 ID 的选项卡与脚本的匹配。在我的情况下，它的“location_tab”。

于 2010-06-19T19:45:46.053 回答
3

打开选项卡时初始化地图绝对是要走的路。如果您尝试在隐藏的 div 上初始化地图，那么它将无法显示。无论您有什么功能可以“显示”您的 div，请在显示 div 之后使用该功能来初始化地图。

if( !maploaded && $("#" +tab2id+ "content").hasClass("map") ) {
    LoadGoogleMap();
    maploaded = true;
}

加载地图后，您可以安全地再次隐藏或显示 div 而不会出现任何问题，因此值得添加一个标志来检查它是否已经加载。

于 2012-04-24T18:46:09.613 回答
0

当您隐藏元素时，Google 地图无法正常工作，例如更改选项卡时的 jquery 选项卡。

最简单的解决方法是绑定google map初始化函数到jquery tab对象的tabsshow事件

$("#tabs").bind( "tabsshow", function(event, ui) {
          if(ui.index == 4) { //my map tab has index 4. This will avoid initialization for other tabs
            initialize(); //google map initialization code
        }
        });

此解决方案适用于任何其他依赖于 DOM 元素的宽度和隐藏的插件，例如 jquery masonry 插件。

于 2012-05-28T10:21:10.850 回答
0

我也一直在为此苦苦挣扎。所以我将提供帮助我完成这项工作的代码，这要感谢Fuzz提供的代码（很抱歉，由于我没有足够的声誉，我无法投票给你的答案......）

我使用高级自定义字段来显示 Google 地图。我使用了 acf 网站上文档的 ACF 提供的代码，并修改了最后一位（“文档准备就绪”部分），以便能够使用 Bootstraps 折叠显示我的地图。带有地图的 div 被折叠脚本隐藏，当它显示时，用于显示地图的 javascript 将被触发。隐藏地图后，我遇到了再次显示地图时地图位置设置消失的问题。在 Fuzz 的一段脚本的帮助下，我让它正常工作。希望这对其他人也有帮助。

var hasLoadedMap = false; 
$('#map').on('shown.bs.collapse', function(e){
if(!hasLoadedMap){
$('.acf-map').each(function(){

    render_map( $(this) );

});
 hasLoadedMap = true;
}

});
于 2014-03-27T11:39:33.020 回答
0

如果你仍然像我一样努力做到这一点，试试这个。

 var hasLoadedMap = false;
$( "#tabs" ).tabs({
      activate: function( event, ui ) {
          //console.log(ui.newTab.context.id);
            if(!hasLoadedMap && ui.newTab.context.id == 'ui-id-4') { //my map tab has index 4. This will avoid initialization for other tabs
                console.log(ui.newTab.context.id);
                initialize();    //google map initialization code
                hasLoadedMap = true;
          }

      }
});

我已将上面的其他答案改编为更最新的内容。

于 2014-03-18T18:14:01.233 回答
0

您使用的是 v2 还是 v3 的 Google Maps API？过去有几个关于这个问题的问题，例如这个（它也链接到其他一些类似的问题）。可能值得阅读这些内容，看看是否有任何建议的解决方案适合您。

[编辑]根据您在下面的评论，我建议尝试使用不透明动画而不是fadeIn：

//Default Action
$(".tab_content").animate({ opacity: 0 }, 0);
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").animate({ opacity: 1 }, 0); 

//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active"); 
$(".tab_content").animate({ opacity: 0 }, 0); 
var activeTab = $(this).find("a").attr("href"); 
$(activeTab).animate({ opacity: 1 }, 500);
return false;
});

我自己将它用于使用 Google Maps API v3 和 JQuery（不是 JQuery 选项卡）的页面，它对我来说效果很好。

于 2010-06-10T12:23:08.333 回答