【jQuery】indexとeqを使ってタブの切り替え表示をする方法

こんにちは、元調剤薬局の薬剤師、今は福井県福井市でフリーのホームページ制作をやっている@ジョウです。

今回の記事は、jQueryのindexとeqを使ったタブの切り替えです。

案件でタブの切り替えを実装したので、備忘録としてまとめておきます。

この記事の内容

【コピペOK】完成コード
全体の流れ
コードの解説
まとめ

【コピペOK】完成コード

完成コードは以下の通り。タブを作るうえで、最小限のコードのみを載せています。

どうぞコピペしてお使いください。

【HTML】

     <div class="tab-wrap">
            <div class="btn-wrap">
                <p class="btn-tab active ">
                 タブ１
                </p>
                <p class="btn-tab">
                   タブ２
                </p>
                <p class="btn-tab">
                   タブ３
                </p>
            </div>
            <div class="content-area">
                <div class="tab-content active">
                  タブ１の内容
                </div>
                <div class="tab-content">
                   タブ２の内容
                </div>
                <div class="tab-content">
                   タブ３の内容
                </div>
            </div>
        </div>

タブ１

</p>

タブ２

</p>

タブ３

</p>

</div>

タブ１の内容

</div>

タブ２の内容

</div>

タブ３の内容

</div>

【CSS】

.tab-wrap .btn-wrap {
        display: flex;
    }

    .tab-wrap .btn-tab{
        width: 100px;
        background: #F1F1F1;
        
    }

    .tab-wrap .btn-tab:hover {
        background-color: #ABB7B7;
      cursor: pointer;
    }

    .tab-wrap .btn-tab.active {
        border-bottom: 2px solid blue;
    }

    .tab-wrap .tab-content{
        display: none;
    }

    .tab-wrap .tab-content.active {
        display: block;
    }

.tab-wrap .btn-wrap {

display: flex;

}

.tab-wrap .btn-tab{

width: 100px;

background: #F1F1F1;

}

.tab-wrap .btn-tab:hover {

background-color: #ABB7B7;

cursor: pointer;

}

.tab-wrap .btn-tab.active {

border-bottom: 2px solid blue;

}

.tab-wrap .tab-content{

display: none;

}

.tab-wrap .tab-content.active {

display: block;

}

【jQuery】

 $('.tab-wrap .btn-tab').click(function () {
//インデックス番号の取得
        var index = $('.tab-wrap .btn-tab').index(this);

//タブとタブ内容にあるactiveクラスを削除する
        $('.tab-wrap .btn-tab, .tab-wrap .tab-content').removeClass('active');

//クリックしたタブにactiveクラスを追加する
        $(this).addClass('active');
//クリックしたタブに該当するタブ内容にactiveクラスを追加する
        $('.tab-wrap .tab-content').eq(index).addClass('active');
    });

$('.tab-wrap .btn-tab').click(function () {

//インデックス番号の取得

var index = $('.tab-wrap .btn-tab').index(this);

//タブとタブ内容にあるactiveクラスを削除する

$('.tab-wrap .btn-tab, .tab-wrap .tab-content').removeClass('active');

//クリックしたタブにactiveクラスを追加する

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

//クリックしたタブに該当するタブ内容にactiveクラスを追加する

$('.tab-wrap .tab-content').eq(index).addClass('active');

});

Codepenでブラウザ表示をさせると以下のようになるので、参考にしてください。

See the Pen
Untitled by awakoji (@awakoji)
on CodePen.

全体の流れ

jQueryの流れは以下の通りです。

①タブをクリックすると、そのタブがX番目であることを取得する(index)
②タブとタブ内容にあるactiveクラスを削除する(removeClass)
③クリックしたタブとそれに該当するタブ内容(X番目のタブ内容)にactiveクラスを付ける(eq,addClass)

コードの解説

ここからはコードの解説。

HTML,CSSの解説

display:flexで、３つタブ名を横に並べます。

cursor:pointerで、このタブの上にカーソルを置くと、矢印になるようにさせます。この時、タブの背景色もbackgroundで変更しています。

表示しているタブに、activeクラスが追加されるようにjQueryで処理するため、activeクラスがついているクラスは、タブのデザインが変わりようにコードを書きます。今回は、border-bottomで青色の下線を表示しています。

HTMLでは、最初に表示させておくタブの内容にactiveを書いておきます。

activeクラスがついていないタブの内容は、display:noneで非表示に、activeクラスがついているタブの内容は、display:blockで表示されるようにしています。

jQueryの解説

jQueryのコードで引っかかるところは、indexのところだと思います。

これは、インデックス番号、つまり、指定した要素が何個目かという数字を取得しています。

例えば、

<ul>
<li>福井県福井市</li>
<li>福井県坂井市</li>
<li>福井県越前町</li>
<li>福井県勝山市</li>
</ul>

<ul>

<li>福井県福井市</li>

<li>福井県坂井市</li>

<li>福井県越前町</li>

<li>福井県勝山市</li>

</ul>

という箇条書きがあった場合、

var i = $('li').index();
console.log(i);

1 2	var i = $('li').index(); console.log(i);

とすれば、結果は、0です。

複数要素があった場合(この場合はli)、最初に該当するliの順番が表示されます。(順番は、0から数える)

<ul>
<li class="fukui">福井県福井市</li>
<li class="sakai">福井県坂井市</li>
<li class="echizen">福井県越前町</li>
<li class="katsuyama">福井県勝山市</li>
</ul>

<ul>

<li class="fukui">福井県福井市</li>

<li class="sakai">福井県坂井市</li>

<li class="echizen">福井県越前町</li>

<li class="katsuyama">福井県勝山市</li>

</ul>

という箇条書きの場合、

var i = $('li').index('.sakai');
console.log(i);

1 2	var i = $('li').index('.sakai'); console.log(i);

とした場合、liの中から、sakaiが何番目にあるかを表示するため、結果は『1』です。

今回の記事では、

 $('.tab-wrap .btn-tab').click(function () { 

var index = $('.tab-wrap .btn-tab').index(this);

$('.tab-wrap .btn-tab').click(function () {

var index = $('.tab-wrap .btn-tab').index(this);

となっています。

indexの引数であるthisは、『クリックした.tab-wrap .btn-tab』を意味しているので、変数indexに入るのは、クリックしたタブが何個目のものかを表す数字です。(タブ１なら0、タブ２なら1、タブ３なら2)

この数字を、以下のようにeqの引数に入れています。

$('.tab-wrap .tab-content').eq(index).addClass('active');

1	$('.tab-wrap .tab-content').eq(index).addClass('active');

eqは、インデックス番号を引数に入れることで、特定の要素だけを指定できます。その要素に、activeクラスを追加しています。

まとめ

タブの切り替えのポイントとなるコードだけを紹介しました。

このコードにデザインを考えていけば、きれいなタブが作れるので、実践してみてください。

わからない方は、質問を受け付けているので、遠慮なくDMをください。