こんなAjax探しています

質問

どなたか　もしご存知なら　このようなAjaxのサンプルライブラリーをご教授ください。

下記同じ様に、Flashをリロードせず、１枚のHTML内に項目を入れておきたく、クリック時に表示されると言うものです。
（SEO的にもクリック時のインクルードは、避けたいと考えています。）
尚且つ、このように　気持ちよくスライドしてくれて、各ページサイズの（縦サイズ）が変更可能であれば言う事ないのですが（＾＾；

各機能の単品動きのAjaxサンプルは拝見しましたが、このように混合すると初心者には厳しい状況です

もし、ご存知であれば教えていただけますと幸いです。よろしくお願いいたします

■参考サイト
http://mb.softbank.jp/mb/product/3G/830sh/

回答No.2

ulmo · ベストアンサー

ANo.1 ulmoです。

すみません、そのものズバリなものがjQuery UIの中にありました。
Tabsというコンポーネントです。
これだとdisplay:noneはJavaScript実行時に付与されるので、
SEO的にもバッチリです。

http://docs.jquery.com/UI/Tabs

お礼

ありがとうございました！！大変助かりました＾＾

回答No.1

ulmo

jquery.js（http://jquery.com/）など使うと楽に実現できます。
すべてのタブの内容を分けて<div>に入れておき、
デフォルトで表示するもの以外を display:none にしておきます。
で、タブがクリックされるたび、
メインの<div>にクリックされたタブの内容を移し、
display:block に切り替えます。

$("#tab1").click(function(){
$("#content").html($("#tab1-content").html());
$("#tab1-content".css("display", "block");
});

上の例はあくまでサンプルです（動かないかも・笑）。
あとはご自身で改変してご利用下さい。
もし理解できないようなら諦めるか、
できるまで勉強するかして下さい。

あとSEO上とかおっしゃってますが、今のサーチエンジンは
display:none のブロックを無視します。
よってこの方法ですとSEO効果はないに等しいですが、
これ以外だと難しいと思います。

お礼

早速のお返事に感謝いたします。
おかげさまで近い形は、作る事ができました
ただ、IE７では完璧に再現できたのですがFirefoxの場合
display:none　のタイミングが　おかしいのか　２回押さないと動かない状況ですｗ　もう少しなんとか勉強してみます。

あと、display:none　ブロックは、SEO的に無視しちゃうんですね　
勉強になりました。

ありがとうございました。