すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

jQuery 外部プラグイン無しでタブ切り替え機能を実装する方法

タブ切り替え機能の実装

おはようございます、すずしんです。

今回の記事では、JavaScript、特にjQueryの勉強の一環としてタブ切り替え機能のサンプルを実装してみます。 外部プラグインなどは一切使わずに、自前のコードだけで実装していきます。 やり方自体はちょっと難しいかもしれませんが、この記事を読みながらならきっと実装できると思います。 どうぞ気軽に読み進めていってくださいね。

jQueryを使ってタブ切り替え機能を実装する方法

それでは、タブ切り替え機能を実装していきます。 HTML・CSSjQueryの順にコードを組んでいきましょう。

HTML

まず、タブとタブの内容を表すコンテンツのHTMLを作成します。 最初のタブには「select」のクラスを設定します。 それ以外のタブのコンテンツには「hide」クラスを設定しています。

<ul class="tab">
<li class="select">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tab_contents">
<div>Tab 1の内容</div>
<div class="hide">Tab 2の内容</div>
<div class="hide">Tab 3の内容</div>
</div>

CSS

続いて、CSSのデザインをしていきます。 tabクラスにはオーバーフロー時の処理を設定します。 タブの要素(li)やタブのコンテンツ(div)には、適当にマージンや背景色などを設定しています。 hideクラスには非表示にするため「display: none」を設定します。 お使いのブログやホームページのデザインによっては、この設定でもレイアウトが崩れる場合がありますので適宜調整してください。

.tab { overflow: hidden; margin-bottom: 0px; padding-left: 0px; }
.tab li { background:#c5c5c5; padding: 5px 20px; float: left; margin-right: 1px; margin-bottom: 0px !important; list-style-type: none; }
.tab li.select { background: #e7e7e7; }
.tab_contents { margin-top: 0px; }
.tab_contents div { background: #e7e7e7; padding: 15px; }
.hide { display:none; }

jQuery

最後に、お待ちかね(?)のjQueryの実装をしていきます。 ここでは、タブをクリックされたときの処理を記述します。

まず、クリックされたタブのインデックスを取得します。 そして、一度タブのコンテンツを非表示にしてから、選択されたタブのコンテンツを表示します。 以前に選択されていたタブに設定されているselectクラスは削除し、新たに現在選択されているタブにselectクラスを設定しています。

ちなみに、これは当たり前ですが…。 jQueryをこのコードよりも前で予め読み込んでおいてくださいね。

$(function() {
    $('.tab li').click(function() {
        var index = $('.tab li').index(this);
        $('.tab_contents div').css('display','none');
        $('.tab_contents div').eq(index).css('display','block');
        $('.tab li').removeClass('select');
        $(this).addClass('select');
    });
});

サンプルの実行結果

上記の実装で作成したタブ切り替え機能のサンプルの実行結果は以下のようになります。 上手くいけばこのように表示されると思います。

  • Tab 1
  • Tab 2
  • Tab 3
Tab 1の内容
Tab 2の内容
Tab 3の内容

ひとこと

今回の記事では、jQueryを使ってタブ切り替え機能の実装を行いました。 この中で手こずる部分というとCSSのデザインでしょうね。 CSSの知識がある程度無いと難しいかもしれません。 私も思い通りのレイアウトにするのにだいぶ苦労しました…。

タブを使ったデザインは、何だかスタイリッシュな感じがしますよね。 タブは非常に便利だと思いますので、あなたもぜひこの方法を使って実装してみてください。