jQueryでタブの切り替えパネルを作成！

今回は、jQueryでタブの切り替えパネルを作成！について、実際にサンプルコードを用いて、詳しく記載していこうと思います。

省スペース化できるUI「タブパネル」。タブ部分をクリックすると、それに対応した部分のパネルが表示される仕組みを、サンプルコードを交え記載していこうと思います。jQueryでタブパネルの作成ができると、限られたスペースで沢山の情報を盛り込むことができるので、とても便利な表現方法になることと思います。

という事で、それでは今回はッ、

・jQueryタブの切り替え完成形＆マークアップ
・active以外のパネルを非表示
・クリックで切り替える仕組み！

上記について記載していこうと思います…。

jQueryタブの切り替え完成形＆マークアップ

それではさっそく、完成形のjQueryによるタブの切り替えパネル！

サンプルDEMOページ

マークアップのサンプルHTML

マークアップのサンプルHTMLを記載してみます。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
</head>
<body>
・・省略・・
<div id=”tab”>
<ul class=”tablabel clearfix”>
<li class=”active”><a href=”#panel1″>HTML</a></li>
<li><a href=”#panel2″>CSS</a></li>
<li><a href=”#panel3″>jQuery</a></li>
</ul>
<div class=”panel”>
<div id=”panel1″>
<p>Hypertext Markup Language の略。Webサイトをマークアップするためのマークアップ言語。</p>
</div>
<div id=”panel2″>
<p>Cascading Style Sheets の略。HTMLやXMLを装飾するために使われる言語。</p>
</div>
<div id=”panel3″>
<p>JavaScriptのライブラリのひとつで、比較的習得しやすい、Webデザイナーにも人気のライブラリ。</p>
</div>
</div>
</div>
・・省略・・
</body>
</html>

マークアップ上では、大きくふたつのブロックに分けています。まずはタブのラベルとなる部分を、li要素でマークアップ。さらにリストにはリンクを入れておきます。リンクはそれぞれ表示させたいパネルのIDを記述しておきます。また、初めから表示させておきたい部分には、li要素にactiveというクラスを付けてあります。

次にリストの下に、パネルとなるdiv要素（.panel）をマークアップ。このパネルに、それぞれIDを付けたdiv要素をマークアップしていきます。今回は3つのパネルを作成します。最後に全体を#tabというIDを付けたdivで囲みます。

ここではタブの仕組みを下記のように作ることを考えてみました。

・active以外のパネルを非表示にする。
・リンクをクリックしたら、開いているパネルを隠し、対応するパネルを表示。
・クリックされたリンクの親であるli要素に、activeというクラスを付ける。

上記がおおよその動作になります。

active以外のパネルを非表示

まずは初期状態として、active以外のパネルを非表示にしておきます。非表示にするにはhide()メソッドを利用します。

マークアップでは、activeというクラスがついているli要素です。一方非表示にしたいパネル部分はdiv要素になっています。つまり操作したい部分が同一の要素ではありません。このことに注意して、jQueryのコードを記載してみます。

サンプルScript<script>
$(function(){
var activePanel = $(“#tab .active a”.attr(“href”);——-①
$(“#tab .panel > div:not(” + activePanel + “)”).hide();——-②
});
</script>

まず、初期状態で表示させたままにしておきたいパネルのIDは、.activeの中のa要素のリンク先（href属性）にマークアップされています。なので1行目で、表示しておくパネルのIDを変数activePanelに代入しておきます。IDは①の$(“#tab .active a”).attr(“href”)で、簡単に取得することが可能です。

次にパネルを非表示にするコード②に付いて記載します。隠したいパネルは、activePanel以外のIDの付いたパネルになりますから、:not疑似クラスセレクタを利用します。セレクタの指定が、少し難しく感じるかもしれませんが、#tab .panel > divの部分はチャイルドセレクタ（直下の子要素のdiv）、+の部分は文字列の連結になります。実際には変数の値を参照して、下記のようになります。

$(“#tab .panel > div:not(“#panel1″)”)

これで.activeに対応したパネル以外を非表示にすることができます。

クリックで切り替える仕組み！

次に、クリックで切り替える仕組みを作ってみます。

サンプルScript2<script>
$(function() {
var activePanel = $(“#tab .active a”).attr(“href”);
$(“#tab .panel > div:not(” + activePanel + “)”).hide();
$(“#tab > ul li a”).click(function(){
$(“#tab > ul li.active”).removeClass(“active”);——①
$(“#tab .panel > div”).hide();——②
$(this).parent(“li”).addClass(“active”);——③
$($(this).attr(“href”)).show();——④
return false;——⑤
});
});
</script>

上記コードでは、#tabというセレクタがなんども登場しています。今までであれば、このような場合は変数にして利用していました。しかし今回は、あえて#tabとしています。

それでは上から順番に、コードの説明を記載していきます。まずは全体を囲むようにclick()メソッドを記述します。イベントハンドラ内の①の部分は、li要素からactiveというクラスを削除しています。続く②では、hide()メソッドを使ってすべてのパネルを隠しています。

③のコードは、this（クリックされたa要素）の親要素であるli要素に、activeというクラスを付けています。activeを付ける要素はa要素ではなくli要素ですから、parent()メソッドを利用しています。

④の部分はセレクタが少し複雑になっていますが、整理してみると、$(this).attr(“href”)には、開きたいパネルのIDが入っているので、$($(this).attr(“href”))として、対応するID部のパネルをshow()メソッドで表示しています。

⑤最後のreturn falseで、a要素の本来の機能（リンク先に移動）を無効化しています。

少し淡々と説明いたしましたが、MK-blog:jQueryを初めから読み進めていた人であれば、難しいコードではないと思います。今回のサンプルは、クリックされた要素と、実際に表示/非表示させたい要素を、ID属性とhref属性を使って関連付けています。隣接セレクタを使い関連付けける場合なども有りますが、今回のタブのように、ID属性とhref属性を利用して操作する手法も覚えておくと、とても便利です。

といことで今回は、jQueryでタブの切り替えパネルを作成！について、サンプルコードを交え記載いたしました。

稀にクライアントワークで、上記のようなパネル作成を依頼されることがございます。jQueryのコーディングに慣れてしまえば、何ら問題ございませんが、使いどころにはページの読み込みスピードの観点から、多少注意が必要になることと思いますが、これもホームページ作成における経験がものをいう所だと、個人的には思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。