導入

Webサイトでは、「お知らせ」「料金表」「FAQ」などでタブ切り替えを見かけることが多くあります。

タブを利用すると、限られたスペースで複数の情報を見やすく整理でき、ユーザーも必要な情報だけを簡単に切り替えて閲覧できます。

jQueryを使えば、複雑な処理を書かなくても数行のコードでタブ切り替えを実装できます。

この記事では、

• タブ切り替えの基本的な仕組み
• HTML・CSS・jQueryの実装方法
• フェードアニメーション付きへの応用
• 実務で気を付けたいポイント

まで詳しく解説します。

タブ切り替えの仕組み

一般的なタブは次のような構造になっています。

タブ１　タブ２　タブ３
──────────────────
　　タブ１の内容

タブをクリックすると

タブ１　タブ２　タブ３
──────────────────
　　タブ２の内容

へ切り替わります。

実際には、

• ボタンをクリック
• クリックした番号を取得
• 対応するコンテンツだけ表示
• 他は非表示

という流れで動いています。

HTML

<div class="tab">
 <ul class="tab-menu">
  <li class="active">HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
 </ul>

 <div class="tab-contents">
  <div class="tab-content active">
　　　HTMLの内容
  </div>

  <div class="tab-content">
　　　CSSの内容
  </div>

  <div class="tab-content">
　　　JavaScriptの内容
  </div>
 </div>
</div>

ポイントは、

• タブの数
• コンテンツの数

を同じにすることです。

jQueryではクリックした番号を利用して対応させます。

CSS

.tab-menu{
 display:flex;
 list-style:none;
}

.tab-menu li{
 padding:15px 25px;
 cursor:pointer;
 background:#eee;
}

.tab-menu li.active{
 background:#0078ff;
 color:#fff;
}

.tab-content{
 display:none;
}

.tab-content.active{
 display:block;
}

activeクラスが付いているものだけ表示します。

jQuery

もっともシンプルな書き方はこちらです。

$('.tab-menu li').click(function(){
 let index = $(this).index();
 $('.tab-menu li').removeClass('active');
 $(this).addClass('active');
 $('.tab-content').removeClass('active');
 $('.tab-content').eq(index).addClass('active');
});

コード解説

index()

let index = $(this).index();

クリックしたタブ番号を取得しています。

例えば、

HTML
CSS
JavaScript

なら、

HTML ・・・0
CSS・・・1
JavaScript・・・2

となります。

removeClass()

まず全員のactiveを消します。

$('.tab-menu li').removeClass('active');

これをしないと、

HTML
CSS
JavaScript

全部activeになります。

addClass()

クリックしたものだけ、

$(this).addClass('active');

を付与します。

eq()

ここが重要です。

$('.tab-content').eq(index)

eq()は、

「○番目」

を取得します。

例えば、

eq(0)
eq(1)
eq(2)

なら、

HTML
CSS
JavaScript

を取得できます。

fadeInで切り替える

実務ではこちらの方が自然です。

$('.tab-menu li').click(function(){
 let index=$(this).index();
 $('.tab-menu li').removeClass('active');
 $(this).addClass('active');
 $('.tab-content').hide();
 $('.tab-content').eq(index).fadeIn();
});

activeとfadeInを組み合わせる

CSSアニメーションを使うなら、

$('.tab-menu li').click(function(){
 let index=$(this).index();
 $('.tab-menu li').removeClass('active');
 $(this).addClass('active');
 $('.tab-content').removeClass('active');
 $('.tab-content').eq(index).addClass('active');
});

CSS

.tab-content{
 opacity:0;
 visibility:hidden;
 transition:.3s;
 position:absolute;
}

.tab-content.active{
 opacity:1;
 visibility:visible;
 position:relative;
}

こちらの方がGPUアクセラレーションが効くため、スマートフォンでも滑らかです。

実務でよくある失敗

タブ数とコンテンツ数が違う

例えば、

タブ　3個
コンテンツ　2個

では、

eq(index)

が存在しない要素を取得してしまいます。

必ず数を合わせましょう。

display:noneとfadeInを混ぜる

CSSで、

display:none;

を書きながら、

fadeIn()

も使うと、

途中でチラつくことがあります。

その場合は、

opacity
visibility

で制御する方がおすすめです。

タブの中に画像がある

画像が遅延読み込み（Lazy Load）の場合、

最初に非表示だと高さが取得できずレイアウトが崩れるケースがあります。

実務では画像の高さを固定するか、表示後にレイアウトを再計算する処理を追加することもあります。

WordPressで使う場合

WordPressでは、

• 商品紹介
• FAQ
• 料金表
• スタッフ紹介
• 実績一覧
• カテゴリー切り替え

などで利用されることが多くあります。

特にACF（Advanced Custom Fields）と組み合わせると、管理画面からタブの内容を編集できるため、クライアントサイトでも使いやすい実装になります。

まとめ

jQueryのタブ切り替えは、クリックしたタブの番号を取得し、その番号に対応するコンテンツだけを表示するシンプルな仕組みです。

今回紹介した方法を覚えておけば、基本的なタブUIはほとんど実装できます。

さらに実務では、CSSアニメーションやフェードエフェクト、レスポンシブ対応、WordPressとの組み合わせを取り入れることで、より使いやすいサイトを構築できます。

まずは基本のサンプルコードを試し、そこからアニメーションやデザインを加えて、自分の案件に合わせたタブ切り替えへ発展させてみてください。