1

わかりました、Gmaps と Jquery タブに関する質問がここにたくさん寄せられていることを考えると、ここにいる全員が 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 と Safari、Windows では Firefox、Chrome、IE7 から 10 でサイトをテストしましたが、問題はありませんでした。

さらに奇妙なのは、昨日この問題が頭をもたげるまで、このサイトはまったく問題なく機能していたということです。過去 1 週間にわたってコードやコンテンツに変更が加えられておらず、プラグインや Wordpress の更新も適用されていません。

どんな意見でも大歓迎です。これまでに診断できたのは、Google マップ、Chrome、jquery タブの組み合わせに問題があるということだけです...しかし、3 か月近く前は完全に機能していました! 通常、私はそれを自分の手抜きコーディングに置き、解決策が見つかるまでグーグルで検索します（通常はここにあります）が、これは本当に私を困惑させました。

基本的なサイト情報:

このサイトは Wordpress 3.5 で構築されており、Google マップは WP Google Maps プラグインを使用して表示され (したがって、ショートコードで呼び出されます)、タブは基本的な jquery タブのセットアップのみです。具体的にどれかは覚えていませんが、基本的にはどれも同じようです。

問題の診断に役立つコードや必要なものがあれば教えてください。喜んでお応えします。

また、これはここへの私の最初の投稿なので、簡単に行ってください:)ハハ。

4

1 に答える 1

0

そうですね、私はこれらのことに関してかなりせっかちで、Google がバグを修正するのを待ちたくありません (実際にバグである場合...個人的には、別の Webkit ブラウザーである Safari でさえ、バグを修正していないと思います)。コードの問題)、Roasted が提案したものと同様の回避策を見つけました。

問題は{visibility: hidden;}、マップに適用されたことが原因のようです。何らかの理由で、クロムはこれを上記のスクリーン ショットで確認できるブラック ボックスとしてレンダリングしていました。表示に設定すると、マップは表示されますが、他のすべてのタブ/コンテンツの上に表示されます。可視性ルールは、マップ コンテンツ (画像タイルなど) を非表示にすることを意味するものとしてクロムによって解釈されているように見えましたが、現在はコンテナーの残りの部分を非表示にしています。

{visibility: hidden;}私が見つけた回避策は、またはでクラスを追加または削除してリンクをクリックすると、各タブを非表示/表示するjqueryタブコードの一部でした{visibility: visible;}。

私がしたことは、{visibility: hidden;}(この場合は.novis) を持つクラスを全体的なマップ タブ コンテナー div に追加して、マップ自体だけでなく、マップ タブ全体がロード時に非表示になるようにすることだけでした。次に、マップ タブ リンクに一意の ID (この場合は) を付けて Javascript をフックし、マップ タブ リンクをクリックすると非表示クラス#mappageが削除されることを示すスクリプトを少し書きました。.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 に答える