制作物全国対応・兵庫県 姫路市にある発信力をテーマとしたホームページ・ブログ制作
ニコ株式会社
Blog


【jQuery】タブ切り替えでGoogleMapがおかしくなったときの対処


10時間ぐらいハマってしまったので書いときます。

 

まずタブ切り替えで参考にさせてもらったのがこちら。
>>http://klutche.org/archives/682/

フェードもついていて、コピペで実装できてしまいます。

ここからさらにタブのひとつにGoogleMapを入れてみたのですが、ズレたり、表示されなかったり・・・。

 

問題はこれ!

$(document).ready(function() {
     //初期表示
     $(".tab_content").hide();//全ての.tab_contentを非表示
     $("ul.tabs li:first").addClass("active").show();//tabs内最初のliに.activeを追加
     $(".tab_content:first").show();//最初の.tab_contentを表示
     //タブクリック時
     $("ul.tabs li").click(function() {
          $("ul.tabs li").removeClass("active");//.activeを外す
          $(this).addClass("active");//クリックタブに.activeを追加
          $(".tab_content").hide();//全ての.tab_contentを非表示
          var activeTab = $(this).find("a").attr("href");//アクティブタブコンテンツ
          $(activeTab).fadeIn();//アクティブタブコンテンツをフェードイン
          return false;
     });
});

上記内の”.hide();”の部分。何やらこの記述がdisplay:none;を呼び出しており、GoogleMapの読み込みに影響を与えているらしい。

そこで下記に書き換え。

$(document).ready(function() {
	//初期表示
    $(".tab_content").css({'visibility':'hidden'  , 'position':'absolute'});//全ての.tab_contentを非表示
    $("ul.tabs li:first").addClass("active").show(); //tabs内最初のliに.activeを追加
    $(".tab_content:first").css({'visibility':'visible' , 'position':'static'}); //最初の.tab_contentを表示
    //タブクリック時
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");//.activeを外す
        $(this).addClass("active"); //クリックタブに.activeを追加
        $(".tab_content").css({'visibility':'hidden' , 'position':'absolute'}); //全ての.tab_contentを非表示
        var activeTab = $(this).find("a").attr("href"); //アクティブタブコンテンツ
        $(activeTab).css({'visibility':'visible'  , 'position':'static'});
        return false;
    });
});

これで動きましたが、フェードインは動かなかったので諦めました。

同じ問題で悩んでいた同士の方、ご自由にコピペで使ってもらってOKです~。
(特にコメントも不要です)



井上 大輔

この記事を書いたひと

ニコ株式会社の社長。html、cssのコーディングの基礎を独学で学び、引きこもってゴソゴソとコーディングをするのが趣味。 建物を見るとhtmlとcssが浮かぶほど。 webの力に惹かれ、今日もせっせとコーディングを行っています。 好きなことはいたずら。子供の頃の夢は社長。 ゲーム好きでテイルズシリーズ、龍が如くシリーズの話題は大好き。 圧倒的にドSですが、妻に怯えながらスマホのゲームに課金をしています。


カテゴリー: 不具合・修理対応事例, PC、WEB小ネタ   パーマリンク

コメントを残す

メールアドレスが公開されることはありません。

スパム対策として日本語が含まれない投稿は無視されますのでご注意ください。

関連記事


カテゴリー:不具合・修理対応事例

ニコ株式会社 公式コラム

お知らせ

コラム新着情報

公式フェイスブックページ


Copyright ©ニコ株式会社 All Rights Reserved.