HOME

ABOUT

ARCHIVES

CONTACT

workshop

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

workshop

jQuery基礎講座[第9回]

どーも@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);
}
});

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

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

JS

// 以下の処理を定義した要素に実行
$(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ファイルを用意したので、是非オリジナルにカスタマイズして使ってみて下さい。

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

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

過去8回の記事はこちら
jQuery基礎講座[第1回]:任意のid属性を使ったクリックアクション
jQuery基礎講座[第2回]:ハンバーガーナビゲーションボタンを作ろう!
jQuery基礎講座[第3回]:ウィンドウサイズを取得してブラウザ100%のぴったりHeightを指定する!
jQuery基礎講座[第4回]:ハンバーガーナビゲーション実装サンプル(ZIP付)
jQuery基礎講座[第5回]:スクロール量に応じて出現するナビゲーションエリア(ZIP付)
jQuery基礎講座[第6回]:スクロール量に応じて要素(ヘッダーなど)を固定する(ZIP付)
jQuery基礎講座[第7回]:スクロールして要素が出現したらアニメーションを実行する方法(ZIP付)
jQuery基礎講座[第8回]:スクロールに応じたビジュアルの拡大・移動で、パララックスライクなお手軽錯視効果を実装する(ZIP付)

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