jQueryとHTML5とCSS3でタブメニューを作ってみよう(2)

この記事は、知り合いにjQueryを教える際に作成したjsdo.itに投稿したコードの補足です。

また、この記事は以下の記事の続きとなります。予定では最低あと1回続く予定です。

1. jQueryとHTML5とCSS3でタブメニューを作ってみよう(1)

完成イメージはこんな感じです。

1. コンテンツをhtmlで表現する

今回は、タブメニューと同じhtml内にコンテンツも記述することにします。

各タブに対応するコンテンツもタブメニューと同じように、ulタグとliで表現してみましょう。

ポイントは、タグのメニューを記述したliと同じ順番でコンテンツも対応させることです。

<ul class="content">
    <li>
    <section>
        <h1>moco</h1>
        <img src="http://jsrun.it/assets/w/k/g/F/wkgFX.jpg" alt="moco" />
    </section>
    </li>
    <li>
    <section>
        <h1>toco</h1>
        <img src="http://jsrun.it/assets/q/8/P/T/q8PTF.jpg" alt="toco" />
    </section>
    </li>
    <li>
    <section>
        <h1>loco</h1>
        <img src="http://jsrun.it/assets/k/m/R/Y/kmRYj.jpg" alt="loco" />
    </section>
    </li>
    <li>
    <section>
        <h1>rico</h1>
        <img src="http://jsrun.it/assets/c/M/u/y/cMuyw.jpg" alt="rico" />
    </section>
    </li>
    <li>
    <section>
        <h1>coco</h1>
        <img src="http://jsrun.it/assets/6/i/f/y/6ify9.jpg" alt="coco" />
    </section>
    </li>
    <li>
    <section>
        <h1>aru</h1>
        <img src="http://jsrun.it/assets/j/6/A/9/j6A9V.jpg" alt="aru" />
    </section>
    </li>
</ul>

各ul.content>liに内包されたsectionがコンテンツに対応していると考えてください。タブのメニューとコンテンツの対応がわかりやすい様に、各コンテンツのsectionに対していh1を配置していますが、そのh1タグの内容をメニューとあわせています。(例えば、タブがtocoならh1もtoco)

2.cssで各コンテンツを非表示にする

各コンテンツをliごとに非表示にしておきます。

.content li {
    margin-top: 15px;
    display: none;
    list-style: none;
}

3.jQueryでクリックしたタブに対応するコンテンツを表示する

タブの順番とコンテンツの順番が対応していることから、クリックしたタブがulの何番めのliであるかを調べれば、表示すべきコンテンツがul.contentの何番目のliであるか分かるはずです。

クリックされた要素が何番目の要素であるかを調べるには以下のようにします。

var index = $(this).index() + 1;

この処理は、indexという名前をつけた変数(ラベルのようなもの)に$(this).index()という処理の結果を記憶するようなものだと覚えておいてください。varは変数を初めて使う前に記述します。

ここで何故+1するかというと、index()の結果は0から数えるのに対して、cssのセレクタは1から数えるからです。コンテンツを表示する処理でcssのセレクタと同じセレクタを利用するため、予め+1としました。

これでindexは、クリックしたタブが何番目のタブであるかを記録しました。後は、jQueryを用いて、CSS3のnth-child(n)で、前に表示したコンテンツを消してから、次に表示したい要素を指定するだけですね。

hide()とshow()を実行することでこの処理は実現できます。

まずは、.content liに該当する要素を消します。

$('.content li').hide();

次に、今回クリックしたindexを表示します。3番目のタブをクリックした場合には、そのliは以下のように表せますね。

.content li:nth-child(3)

このよな文字列を変数と文字列から作るためには、以下のように文字列と変数を結合します。

'.content li:nth-child(' + index + ')'

つまり、この文字列で表される要素を表示する処理は以下のようになります。

$('.content li:nth-child(' + index + ')').show();

今回のjQueryの処理をまとめると次のようになります。

// index()で取得した数値は0から始まるのでnth-childで取得する数値と合わせるために+1する
var index = $(this).index() + 1;
// hide()を実行することで該当する要素が非表示となる。
$('.content li').hide();
// css3のセレクタと同じで:nth-child(3)というような文字列を生成する。
// show()を実行することで該当する要素が表示される。
$('.content li:nth-child(' + index + ')').show();

以上、今回は、実際にタブを選択するとコンテンツが変わるような処理を書いてみました。次回はjQueryをもう少し使う練習をしてみます。