jQuery基礎講座：タブ切り替えを用いた特定要素の表示・非表示を実装する（ZIP付）

jQuery基礎講座[第９回]

どーも＠PNRAです！
忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。

今更感たっぷりですが、タブ切り替えを使って任意の要素の表示・非表示を制御するものをプラグインや外部ファイルを用いずjQueryを使って実装してみたいと思います。

挙動としては、ギャラリーサイトによくみられる全表示・任意のカテゴリー毎の表示切り替えや、色・テーマに応じたコンテンツのみを表示させるといった際に使用されているあれです。

それでは、具体的にみていきましょう。

実装実例

右上をタブをクリックして動作を確認してみてください。

タブをクリックすると、任意のタグがついた要素のみを残して、その他のものを非表示にするという内容になっています。

こちらからデモページもご覧いただけます。
TAB Select DEMO

今回作成したデモ『Scroll scale』のポイントは、

・どの要素がクリックされたかを識別させる

といった点です。

実装内容

順を追って説明をしていきたいと思います。

概要を掴む

タブをクリックして特定カテゴリーの表示・非表示を切り替えるには、
・クリックされたタブを識別させる
・条件分岐で、クリックされたタブに紐づいた要素を表示し、それ以外の要素を非表示にする
という指示が必要になってきます。

タブに指示を与える

まずはクリックされたタブを識別させて、どのタブが選択されているかを分かるようにする。そこで、クリックされたタブに「.select」を与え、そうでない場合は「.select」を外すという指示を作る。

//クリックされたタブを識別する

    $("#tags span").click(function() {

        var tags = $(this).attr('id');

        $("#tags span").removeClass('select');

        $(this).addClass('select');

    });

今回の例では、#tags内のspan要素をタブに設定しているため、「#tags」内の「span」をクリックした際に以下の処理をおこなう。という指示を記述し、変数「tags」を複数のspan要素を.attr()メソッドでid属性を基準として識別させる。あとは、クリックされたものにはaddClass()、そうでないものにはremoveClass()を与えて「.select」の切り替えをおこなっている。

要素の表示・非表示を切り替える

要素の表示・非表示は、style属性で与えてもよかったのだが、せっかくのjQueryなので、ここは便利なメソッドを利用する。今回用いたのはfadein()、fadeout()を使う。具体的には、先ほど定義した変数「tags」が指定のid属性だった場合とそうでない場合をif文で切り替える、といった指示を与えていこうと思う。

//変数「tags」が識別したid属性毎に指示内容を分岐する

    $("#tags span").click(function() {

        var tags = $(this).attr('id');

        $("#choice div").fadeOut(500);

        if(tags == 'tab02') {

            $("#choice .tab02").fadeIn(500);

        } else if(tags == 'tab01') {

            $("#choice .tab01").fadeIn(500);

        } else if(tags == 'tab03') {

            $("#choice .tab03").fadeIn(500);

        } else {

            $("#choice div").fadeIn(500);

        }

    });

これらをまとめて指示を記述する

上記の内容をまとめると、

// 以下の処理を定義した要素に実行

$(function() {

// 「#tags」内の「span」がクリックされると以下の処理を実行

    $("#tags span").click(function() {

// 変数「tags」を定義する

        var tags = $(this).attr('id');

// クリックされたタブにのみ「.select」を与える

        $("#tags span").removeClass('select');

        $(this).addClass('select');

// クリックされたタブに紐づいた要素を表示、それ以外を非表示にする

        $("#choice div").fadeOut(500);

        if(tags == 'tab02') {

            $("#choice .tab02").fadeIn(500);

        } else if(tags == 'tab01') {

            $("#choice .tab01").fadeIn(500);

        } else if(tags == 'tab03') {

            $("#choice .tab03").fadeIn(500);

        } else {

            $("#choice div").fadeIn(500);

        }

    });

});

HTML

<body>
<div id="tags">

<span class="select">all</span>

<span id="tab01">tab01</span>

<span id="tab02">tab02</span>

<span id="tab03">tab03</span>

</div>
<div id="choice">

<div class="tab01"><img src="images/sample01.jpg"></div>

<div class="tab02"><img src="images/sample02.jpg"></div>

<div class="tab02"><img src="images/sample02.jpg"></div>

<div class="tab03"><img src="images/sample03.jpg"></div>

<div class="tab03"><img src="images/sample03.jpg"></div>

<div class="tab02"><img src="images/sample02.jpg"></div>

<div class="tab01"><img src="images/sample01.jpg"></div>

<div class="tab03"><img src="images/sample03.jpg"></div>

<div class="tab01"><img src="images/sample01.jpg"></div>

<div class="tab01"><img src="images/sample01.jpg"></div>

<div class="tab03"><img src="images/sample03.jpg"></div>

<div class="tab02"><img src="images/sample02.jpg"></div>

</div>

</body>

CSS

.select {

border-bottom:solid 1px #000;

padding-bottom:5px;

}

何気に重宝する内容なんじゃないかな？と思ったので、簡単ですが作ってみました。

TAB Select DEMO

最後に

上記サンプル内容をまとめたZIPファイルを用意したので、是非オリジナルにカスタマイズして使ってみて下さい。

ダウンロードはこちらから

TAB_Select(2Mb)

ちょくちょく更新していきますので、是非こちらもご覧ください。

Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)

jQuery基礎講座：タブ切り替えを用いた特定要素の表示・非表示を実装する（ZIP付）

実装実例

実装内容

最後に

Share

Follow Us

Daily Tips