JS タブメニューで切り替え

2020-06-04

アコーディオンメニューと同じように、タブメニューの切り替えなどもよく使用する場面があるかと思いますが、今回はそれについて記述していきます。


  • タブ1
  • タブ2
  • タブ3

ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。ここにコンテンツ1が入ります。

ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。ここにコンテンツ2が入ります。

ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。ここにコンテンツ3が入ります。


まず、htmlソースは下記のようになっています。

タブメニューの部分とコンテンツ部分で、最初に表示させておきたい要素にクラスを付与しておくと良いです。
今回の場合は、タブに “active”、“show”を付与しています。


次に、CSSの記述です。

細かいレイアウト調整部分等は省いていますが、
14行目の li.active の指定と
18行目、21行目の .box へのそれぞれの指定が大事になります。


最後に、スクリプト部分になります。

タブの部分をクリックした際に、タブメニューのクラスの操作とコンテンツ部分のクラスの操作を行っています。
index()eq()を活用しているので、それぞれの数に増減があっても、そのまま対応することができます。


余談

タブの切り替えをフェードインにしたい場合は、7行目の部分を下記のように書き換えると対応することができます。

あとは、CSSでアニメーションを設定しておく方法などがあると思います。