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

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

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

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

スポンサーリンク

【コピペOK】完成コード

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

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

【HTML】

【CSS】

【jQuery】

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

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

全体の流れ

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

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

コードの解説

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

HTML,CSSの解説

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

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

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

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

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

jQueryの解説

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

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

例えば、

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

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

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

という箇条書きの場合、

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

今回の記事では、

となっています。

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

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

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

まとめ

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

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

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

スポンサーリンク

おすすめ記事

フォローする