【応用編】タブパネルNo2

タブパネルNo1ではshow()、hide()で表示を切り替えましたが、
jQueryのインターフェースらしくなるように、
slideUp()slideDown()にしてみましょう。
よりユーザーへインパクトを与え、
コンテンツが切り替わりを効果的に表現出来ます。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“ul.panel li:not(” + $(“ul.tab li a.selected”).attr(“href”)  + “)”).hide();

 $(“ul.tab li a”).click(function(){
  $(“ul.tab li a”).removeClass(“selected”);
  $(this).addClass(“selected”);
  $(“ul.panel li”).slideUp(“normal”);
  $($(this).attr(“href”)).slideDown(“normal”);
  return false;
 });
});
</script>

【HTML】
タブパネルNo1と同じ

タブパネルサンプル

This entry was written by admin , posted on 金曜日 6月 17 2011at 06:06 pm , filed under 応用例 and tagged , , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

コメントを残す

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>