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

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

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

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

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

<div id="tabpanel">
<ul id="tab">
  <li><a href="#tab1" class="selected">その1</a></li>
  <li><a href="#tab2">その2</a></li>
  <li><a href="#tab3">その3</a></li>
</ul>
<div class="panel" id="tab1">
その1の中身
</div>
<div class="panel" id="tab2">
その2の中身
</div>
<div class="panel" id="tab3">
その3の中身
</div>
</div>

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

$(function(){
//load
  $("#tabpanel").load("読み込みたいファイル",function(){
    $(".panel").hide();
    href = $("ul#tab li a.selected").attr("href");
    $(href).show();
  });

//tab
  $("ul#tab li a").live('click',function(){
    $("ul#tab li a").removeClass("selected");
    $(this).addClass("selected");
    id = $(this).attr("href");
    $(".panel").hide();
    $(id).show();
    return false;
  })
})

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

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

スポンサード・リンク