2020.12.16 更新アイコン 2020.12.18
javascript

jsでタブ切り替えを作る

  • コーディング
  • タブ切り替え
  • テクニック

タブ切り替えをjsで実装する手順をご説明していきます。

今までいろいろな方法でタブを実装してきましたが、このjsを使う方法が一番簡単でした。

とりあえずコードをそれぞれコピペして動作確認をしてみてください。

 

See the Pen
YzGVyWO
by nanami (@nanami_po)
on CodePen.

 

jsの仕組み

jsを詳しく見ていきます。

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/

Share Please

Read this too