jQueryでタブメニュー

Yuuです。

今日は、jQueryのみでタブ切り替え（フェード付）の実装です。 jQueryのみで実装できるので、簡単な切り替えのみならお手軽感満載。

jQueryの読み込み

1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

あらかじめ、jQueryをhtmlファイルに読み込んでおきます。

html

1
2
3
4
5
6
7
8
9
10
11
12

<div id="tab">
  <ul class="tabNav">
    <li><a href="#contents01">contents01</a></li>
    <li><a href="#contents02">contents02</a></li>
  </ul>
  <div id="contents01" class="tabContents">
    コンテンツ内容01
  </div>
  <div id="contents02" class="tabContents">
    コンテンツ内容02
  </div>
</div>

タブメニューとコンテンツ内容をそれぞれ記述します。 ポイントはclassで指定した「tabContents」 このクラスをjQueryによって、表示の切り替えとして利用します。

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function() {
  $("#tab .tabContent").hide();
  $("#tab .tabNav li:first a").addClass("active").show();
  $("#tab .tabContent:first").show();
  $("#tab .tabNav li").click(function() {
    $("#tab .tabNav li a").removeClass("active");
    $(this).find("a").addClass("active");
    $("#tab .tabContent").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
  });
});

初めに、コンテンツ内容を非表示にします。 次に、メニューの最初の項目にclassでactiveを追加します。 また、コンテンツ内容の最初の項目を表示します。

あとはタブメニューがクリックされたら、activeクラスを削除し、クリックされた項目に付加。 同時に表示していたコンテンツ内容を消してフェードで新しいコンテンツを表示します。

CSSのスタイリングとhtmlもシンプルな構成なので結構お気に入りです。 豊富な機能とか求めるのであれば、jQueryプラグインのjQuery UI Tabsとか使うのもいいかと思います。

Comments