この記事の前提条件
対象: jQuery(既存のjQuery環境での実装を想定)
難易度: ★★☆
所要時間: 約10分
料金プランの比較や、商品詳細ページの「商品情報・レビュー・配送について」など、限られたスペースに複数のコンテンツを切り替えて表示したい時に使うのがタブUIです。既存サイトでjQueryを使っている場合の、シンプルな実装方法を紹介します。
HTML: タブのボタンと中身をセットで用意する
<div class="tab-buttons">
<button class="tab-btn is-active" data-target="tab1">商品情報</button>
<button class="tab-btn" data-target="tab2">レビュー</button>
<button class="tab-btn" data-target="tab3">配送について</button>
</div>
<div class="tab-content is-active" id="tab1">商品情報の中身</div>
<div class="tab-content" id="tab2">レビューの中身</div>
<div class="tab-content" id="tab3">配送についての中身</div>ボタン側にdata-target属性で対応する中身のidを持たせておくのがポイントです。JavaScript側はこの対応関係を見て、どの中身を表示するか判断します。
jQuery: クリックされたボタンに応じて表示を切り替える
$('.tab-btn').on('click', function() {
const target = $(this).data('target');
$('.tab-btn').removeClass('is-active');
$(this).addClass('is-active');
$('.tab-content').removeClass('is-active');
$('#' + target).addClass('is-active');
});.tab-content {
display: none;
}
.tab-content.is-active {
display: block;
}クリックされたボタンのdata-targetを読み取り、いったん全部のis-activeクラスを外してから、対象のボタンと中身だけに付け直す、という流れです。
💡 新規プロジェクトならjQueryなしのCSS実装も検討を
既存サイトの改修でjQueryがすでに読み込まれている場合は、本記事の方法が手早くて実用的です。一方、これから新しく作るプロジェクトであれば、ラジオボタンと:checked疑似クラスを組み合わせたCSSだけの実装や、素のJavaScriptのaddEventListenerで、jQuery自体を読み込まずに同じ動きを再現できます。1つのタブ機能のためだけにjQuery本体(数十KB)を追加で読み込むのは、表示速度の面では割に合わないケースが多いので、新規案件では検討してみてください。
まとめ
- ボタンに
data-targetで対応する中身のidを持たせておく - クリック時に一度全部のis-activeを外し、対象だけに付け直すのが基本の書き方
- 既存にjQueryがあるならそのまま実装、新規案件なら素のJavaScriptやCSSだけの実装も検討する