【jQuery】１番簡単なタブ切り替えの実装
タブ切り替えをjQueryで実装する手順をご説明していきます。
今までいろいろな方法でタブを実装してきましたが、このjQueryを使う方法が一番簡単でした。
とりあえずコードをそれぞれコピペして動作確認をしてみてください。
See the Pen
YzGVyWO by nanami (@nanami_po)
on CodePen.
jQueryの仕組み
jQueryを詳しく見ていきます。
2行目
$(".tab").on("click", function() {
tabをクリックしたら以下のイベントが発生します。
3行目
$(".is-active").removeClass("active");
一番最初にデフォルトとして表示しているタブに.is-activeが付いているので、そのクラス名を一旦消します。
4行目
$(this).addClass("is-active");
クリックしたタブにis-activeのクラス名が付与されます。
5行目
$('.is-show').removeClass('is-show');
タブをクリックしたときに表示されるコンテンツに付与されているis-showクラスを一旦消します。
6行目
const index = $(this).index();
クリックしたタブがタブの中で何番目かを判定し、indexとして定義します。
7行目
$('.content').eq(index).addClass('is-show');
クラス名のcontentが付いている要素のindex番目にis-showクラスを付与します。
タブの2番目をクリックしたらそのタブの番号と同じ2番目のコンテンツが表示されるようになるということです◎
まとめ
とっても簡単だったと思います！うまくいかないな？というときは、jqueryがきちんと読みこまれているか確認してください。
公式サイト：https://code.jquery.com/
関連記事
