问Google和Jquery选项卡:地图只在Google中在所有内容上加载黑色矩形
EN

Stack Overflow用户

提问于 2013-05-26 02:19:00

回答 1查看 656关注 0票数 1

好的，我相信这里的每个人都厌倦了Gmap和Jquery选项卡，因为这里有很多关于它的问题，但这是一个奇怪的问题。

下面是问题的屏幕截图：http://scotbrut.co.uk/screenshot-chrome-maps-tabs-issue.png

你可以在这里的网站上亲眼看到它(一定要在Chrome中查看它)：http://scotbrut.co.uk/archive/hunterian-art-gallery/ ...or在网站上的任何存档条目上。

基本上，Google Map窗口显示在每个归档条目的最后一个选项卡中，它似乎在所有其他选项卡和内容的顶部加载一个黑色矩形(尽管您可以通过它来选择文本/单击链接等等)。您可以通过单击“图库”或“地图”选项卡使其消失。

据我所知，这个问题仅限于Google (win & mac)；我已经在我的mac和火狐、Chrome和IE7上通过10台在windows上测试了该网站，没有问题。

更奇怪的是，这个网站一直运作得很好，直到昨天这个问题才抬头。在过去的一周里，代码甚至内容都没有改变，也没有应用插件或Wordpress更新，所以我无法理解为什么会突然发生这种情况？

任何输入都将是非常感谢的--到目前为止，我所能诊断出的是，这是一个与Google、Chrome和jquery tabs...but组合在一起的问题，它在近3个月前就已经完美地工作了！通常情况下，我只会把它归结为我的劣质编码和谷歌，直到我找到一个解决方案(通常在这里)，但这真的让我感到困惑。

基本网站信息：

该站点构建在Wordpress 3.5上，google地图使用插件显示(因此它们被用一个短代码调用)，而选项卡只是一个基本的jquery选项卡设置。我不记得具体是哪一个，但它们似乎基本上是一样的。

如果有任何代码或任何需要帮助诊断的问题，请告诉我，我会乐意的。

而且-这是我在这里的第一篇帖子，所以请轻松一点:)哈哈。

tabs

maps

jquery

google-chrome

回答 1

Stack Overflow用户

发布于 2013-05-27 02:35:05

是的，在这些事情上，我很不耐烦，不愿意等待谷歌修复这个bug (如果它确实是一个bug...personally，我认为它是，即使是另一个webkit浏览器Safari，对代码也没有问题)，所以我找到了一个类似于烤建议的解决方法。

这个问题似乎源于{visibility: hidden;}被应用到地图上。出于某种原因，chrome将其呈现为黑匣子，您可以在上面的屏幕截图中看到。当它被设置为可见时，该映射将显示在所有其他选项卡/内容之上。似乎可见性规则被chrome解释为隐藏映射内容(所以是图像、瓷砖等)，而现在则是容器的其余部分。

我找到的解决方法是jquery代码的一部分，当您通过添加或删除带有{visibility: hidden;}或{visibility: visible;}的类来单击链接时，会隐藏/显示每个选项卡。

我所做的就是将一个带有{visibility: hidden;}的类(在本例中是.novis)添加到整个map选项卡容器div中，这样整个map选项卡就被隐藏在加载中，而不仅仅是映射本身。然后，我只给map选项卡链接一个惟一的ID (在本例中是#mappage)，以便Javascript挂钩，并编写了一些脚本，说明单击map选项卡链接可以删除没有可见性的.novis类。现在似乎在所有浏览器上都能正常工作。

下面是我添加的代码：

$("ul.tabs li#mappage").click(function() {
            $("div#mapcontainer").removeClass("novis");
            //$(this).addClass("active"); 
            });

这是整个jquery选项卡代码(最后是我的代码片段)：

  <script type="text/javascript">
    $(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;
        });
        $("ul.tabs li#mappage").click(function() {
        $("div#mapcontainer").removeClass("novis");
        //$(this).addClass("active"); 
        });
    });
</script>