次のような、タブメニューをクリックしたら表示内容も切り替わるようなものをjQueryで実装する方法を紹介したいと思います。
See the Pen
jquery-tab by KUBO (@KUBOGEN)
on CodePen.
HTML
まずタブメニューと表示させるコンテンツを用意します。
<ul class=”tab-list”>
<li class=”tab-item active”>タブ１</li>
<li class=”tab-item”>タブ２</li>
<li class=”tab-item”>タブ３</li>
</ul>
<ul class=”content-list”>
<li class=”content-item show”>コンテンツ１</li>
<li class=”content-item”>コンテンツ２</li>
<li class=”content-item”>コンテンツ３</li>
</ul>
最初に表示させておくタブとコンテンツには、それぞれ「active」「show」のクラスをつけています。
CSS
.tab-list {
display: flex;
}
.tab-item {
background: #ccc;
padding: 10px 25px;
}
.tab-item.active {
background: #eee;
}
.tab-item:hover {
cursor: pointer;
}
.content-item {
background: #eee;
padding: 20px;
display: none
}
.content-item.show {
display: block;
}
次にCSS。デザインに関しては好きなようにしていただき、ポイントとしては、コンテンツを「display:none;」で非表示にし、「show」のクラス名がついているコンテンツは「display:block;」で表示させていること。
jQuery
$(function() {
$(‘.tab-item’).click(function() {
var index = $(‘.tab-item’).index(this);
$(‘.active’).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘.content-item’).removeClass(‘show’).eq(index).addClass(‘show’);
});
});
最後にjQuery。ここでタブの切り替えを実装していきます。
クリックしたら行う処理
});
タブ（.tab-item）をクリックしたら処理を行います。
まず、変数indexにクリックしたタブの順番を入れておきます。indexの引数としてthisを入れておくことで、クリックした要素の順番を取得することができます。
activeクラスがついたタブから一旦activeクラスを取ります。
そして、クリックされたタブにactiveクラスを付与。
activeクラスの時と同様、表示されているコンテンツから一旦showクラスを取ります。
そして、クリックされたタブと同じ順番のコンテンツにshowクラスをつけます。このときに使うのが最初に宣言した変数indexです。
eqの引数に変数indexを指定することで、クリックされたタブと同じ順番のコンテンツにshowクラスをつけて表示することができます。
まとめ
タブがクリックされたら以下の処理を行うことで、切り替えをしています。
①クリックされたタブの順番を変数に入れる
②タブのactiveクラスを外す
③クリックされたタブにactiveクラスをつける（クリック時のデザインを適用）
④コンテンツのshowクラスを一旦外し、①の変数を利用してクリックされたタブと同じ順番のコンテンツにshowクラスをつける
行われている処理はたったこれだけなので、わりと簡単です。
See the Pen
jquery-tab by KUBO (@KUBOGEN)
on CodePen.
Leave a Comment