jQueryの.loadで読み込んだものの一部を非表示に

Yahoo!JAPANトップのタブパネル

jQueryのloadで、Yahoo!JAPANトップのようなタブパネルを非同期読み込みしたときに、一部を非表示したかったのでそのメモ。

アマゾンや楽天のAPIを使い、上の画像のようなタブパネルを作ったのですが、表示ページにphpで書くと、読み込みの際にとても時間がかかるので、それをjQueryのloadで読み込んでページ表示を高速化しようとしました。

loadのコールバック関数に設定する

例として、以下のようなHTMLを。適当にCSSを設定すると、タブパネルになります。
なお、JavascriptをOFFにされても表示したいので、CSSで表示非表示を決めずに、Javascriptでの表示非表示を制御します。

実際に書くjQueryは以下のような感じ。

loadのコールバック関数で、表示非表示を制御しています。以前は、読み込んだ後に設定していたのですが、それでは全部表示されてしまい、意味のないことに。タブのリンクをクリックすると、正常になりましたけれども。

他に気をつけることは、liveを使うところでしょうか。clickだと動作しません。

GRC検索順位チェックツール*
順位チェックとサイト管理を1つのツールで!検索順位チェックツールGRC*

スポンサード・リンク

«
»
 

トラックバックURL

コメントを書き込む