1

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

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

您可以在此处的网站上亲眼看到它（确保在 Chrome 中查看）： http ://scotbrut.co.uk/archive/hunterian-art-gallery/ ...或任何归档网站上的条目。

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

据我所知，该问题似乎仅限于 Google Chrome（win 和 mac）；我已经在我的 Mac 和 Firefox、Chrome 和 IE7 到 10 的 Windows 上测试了 Firefox 和 Safari 中的站点，没有任何问题。

更奇怪的是，直到昨天这个问题浮出水面时，该网站一直运行良好。在过去的一周里，代码甚至内容都没有发生任何变化，也没有应用插件或 Wordpress 更新，所以我一生都无法理解为什么会突然发生这种情况？

任何输入都将不胜感激 - 到目前为止，我已经设法诊断出它是谷歌地图、Chrome 和 jquery 选项卡组合的问题......但它在近 3 个月前运行良好！通常我会把它归结为我粗制滥造的编码和谷歌，直到我找到一个解决方案（通常在这里），但这真的让我很难过。

网站基本信息：

该站点建立在 Wordpress 3.5 之上，谷歌地图使用 WP Google Maps 插件显示（因此使用简码调用它们），并且这些选项卡只是一个基本的 jquery 选项卡设置。我不记得具体是哪一个，但它们似乎基本相同。

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

另外——这是我在这里的第一篇文章，所以放轻松:) 哈哈。

4

1 回答 1

0

是的，所以当涉及到这些事情时我相当不耐烦，并且不愿意等待谷歌修复错误（如果确实是一个错误......我个人认为是，即使是 Safari，另一个 webkit 浏览器，也没有代码问题），所以我找到了一个类似于 Roasted 建议的解决方法。

问题似乎源于{visibility: hidden;}应用于地图。出于某种原因，chrome 将其渲染为您可以在上面的屏幕截图中看到的黑框。当它设置为可见时，地图将显示在所有其他选项卡/内容之上。似乎可见性规则被 chrome 解释为意味着隐藏地图内容（因此图像图块等），但现在是容器的其余部分。

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

我所做的只是将一个带有{visibility: hidden;}（在本例中.novis）的类添加到整个地图选项卡容器 div，以便在加载时隐藏整个地图选项卡，而不仅仅是地图本身。然后我简单地给地图选项卡链接一个唯一的 ID（在这种情况下#mappage）以便 Javascript 挂钩，并编写了一些脚本来说明单击地图选项卡链接会删除不可见性.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>

希望这是有道理的。我怀疑这对其他人有多大用处，但我还是可以发布我发现的内容。再次感谢 Roasted 为我指明了正确的方向 :)

于 2013-05-27T10:35:05.133 回答