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です~。
(特にコメントも不要です)
スパム対策として日本語が含まれない投稿は無視されますのでご注意ください。