タブをコピペで実装できます。
※案件ごとにCSSの調整が必要です。
See the Pen AB-TABS.js by abenosite (@abenosite) on CodePen.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="tab-section"> <!--タブボタン--> <ul class="tab-button-area"> <li class="tab-button active">Tab-A</li> <li class="tab-button">Tab-B</li> <li class="tab-button">Tab-C</li> </ul> <!--タブを切り替えて表示するコンテンツ--> <div class="tab-content-area"> <div class="tab-content show">Content-A</div> <div class="tab-content">Content-B</div> <div class="tab-content">Content-C</div> </div> </div> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* タブボタン全体 */ .tab-button-area { display: flex; justify-content: center; } /* タブボタン部品 */ .tab-button { flex-grow: 1; padding: 5px; list-style: none; border: solid 1px #CCC; text-align: center; cursor: pointer; } /* タブコンテンツ全体 */ .tab-content-area { height: 100px; border: solid 1px #CCC; border-top: none; background: #eee; } /* タブコンテンツ部品 */ .tab-content { display: none; } .tab-button.active { background: #F00; color: #FFF; transition: all 0.2s ease-out; } .tab-content.show { display: block; } //※案件ごとにCSSの調整が必要です。 |
app.js
|
1 2 3 4 5 6 7 8 9 |
$(function(){ $('.tab-button').click(function () { $('.tab-section .active').removeClass('active');// .active削除 $(this).addClass('active');// クリックしたタブボタンに.active付与 $(".tab-section .show").removeClass('show');// .showを削除 const index = $(this).index();// クリックしたタブからインデックス番号を取得 $(".tab-content").eq(index).addClass('show');// クリックしたタブと同じインデックス番号をもつタブアイテムに.show付与 }); }); |
部品
親：tab-section
子：tab-button-area
孫：tab-button
子：tab-content-area
孫：tab-content
仕様
・ボタンをクリック
・ボタンにあわせたボタンコンテンツが表示される