SIMこんにちはSIMです。
今日はjQueryでタブ切り替えの実装方法について紹介します。
はじめの下準備
SIM最初にリセットCSSとjQueryのCDNを書いておきます。これは自分用のメモも兼ねていますので、必要ない人はスルーして下さい。
リセットCSSのCDN
リセットCSSのCDNは通常はhtmlのheadタグ、WordPressの場合はfunctions.phpに書きます。CodePenの場合は、セッティング（歯車のアイコン）のhtmlのheadタグ用の記入欄に書いてあります。
<!-- reset.css destyle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />jQueryのCDN
jQueryのCDNは通常はhtmlのbody閉じタグ直上、WordPressの場合はfunctions.phpに書きます。CodePenの場合はセッティング（歯車のアイコン）のJavaScriptに専用の記入欄に書いています。
<!-- jqueryのCDN -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>複数設置に対応可能なタブ切り替え（jQuery）実装法
SIMまずは複数設置にも対応できるタブ切り替えの方法から紹介します。
複数設置した場合の見本
SIM下のCodePenではタブ切り替えを２個設置しています。
なお、こちらで紹介したコードは単独設置タイプのタブ切り替えでも問題なく使えます。（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）
See the Pen タブ切り替え | jQuery | 複数設置 by Satoru Shimizu (@sat-simizu) on CodePen.
HTML の構造
SIMHTMLの構造は単純ですので、コピペで簡単に利用できます。
HTML構造をザックリ解説すると、まずタブのエリアと中身（panel）エリアに分かれています。
<!-- ーーーーーーーーーーーーーーーーーーーー -->
<!-- タブ１ -->
<!-- ーーーーーーーーーーーーーーーーーーーー -->
<!-- タブ -->
<ul class="tab-area">
<li class="tab active">哺乳類</li>
<li class="tab">鳥類</li>
<li class="tab">爬虫類</li>
</ul>
<!-- パネル -->
<div class="panel-area">
<div class="panel active">
<ul class="panel-ul">
<li class="panel-li">ヒト</li>
<li class="panel-li">ニホンザル</li>
<li class="panel-li">ライオン</li>
<li class="panel-li">アライグマ</li>
</ul>
</div>
<div class="panel">
<ul class="panel-ul">
<li class="panel-li">シジュウカラ</li>
<li class="panel-li">アカゲラ</li>
<li class="panel-li">アオバト</li>
<li class="panel-li">シマエナガ</li>
</ul>
</div>
<div class="panel">
<ul class="panel-ul">
<li class="panel-li">イシガメ</li>
<li class="panel-li">ニホンカナヘビ</li>
<li class="panel-li">アオダイショウ</li>
<li class="panel-li">ニホンヤモリ</li>
</ul>
</div>
</div>
<!-- ーーーーーーーーーーーーーーーーーーーー -->
<!-- タブ２ -->
<!-- ーーーーーーーーーーーーーーーーーーーー -->
<!-- タブ -->
<ul class="tab-area">
<li class="tab active">両生類</li>
<li class="tab">魚類</li>
<li class="tab">甲殻類</li>
</ul>
<!-- パネル -->
<div class="panel-area">
<div class="panel active">
<ul class="panel-ul">
<li class="panel-li">トノサマガエル</li>
<li class="panel-li">モリアオガエル</li>
<li class="panel-li">オオサンショウウオ</li>
<li class="panel-li">アカハライモリ</li>
</ul>
</div>
<div class="panel">
<ul class="panel-ul">
<li class="panel-li">サンマ</li>
<li class="panel-li">サクラマス</li>
<li class="panel-li">ニシン</li>
<li class="panel-li">キンメダイ</li>
</ul>
</div>
<div class="panel">
<ul class="panel-ul">
<li class="panel-li">イセエビ</li>
<li class="panel-li">イシダタミヤドカリ</li>
<li class="panel-li">ヒライソガニ</li>
<li class="panel-li">モンハナシャコ</li>
</ul>
</div>
</div>CSSの構造
SIMCSSはタブが横並びになるようにflexboxかglid CSSを使うのと、タブやパネルがアクティブになる時の設定がポイントで、本当に必要なコードはかなり少ないです。
下のコードは一見長く見えますが、そのほとんどがタブ動作に関係ない体裁を整えるためのCSSです。
/* ------------------------- */
/* タブ */
/* ------------------------- */
.tab-area {
display: flex;
border: 1px solid #333;
cursor: pointer;
max-width: 500px;
width: 100%;
margin: 50px auto 0;
}
.tab {
display: flex;
justify-content: center;
align-items: center;
width: calc(100%/3);
padding: 10px;
background-color: #cccccc;
}
.tab:nth-child(n+2) {
border-left: 1px solid #333;
}
.tab.active {
background-color: #023e8a;
color: #fff;
}
/* ------------------------- */
/* タブの中身 */
/* ------------------------- */
.panel {
display: none;
background-color: #caf0f8;
max-width: 500px;
width: 100%;
margin: 0 auto;
padding: 20px 0;
}
.panel.active {
display: block;
}
.panel-ul{
margin: 0 auto;
max-width: 150px;
list-style-type: disc;
line-height: 1.8;
}JavaScript（jQuery） の構造
SIMそして、最後にjQueryのコードです。
こちらは、クラス名を間違えないようにしてコピペで使って下さい。
// タブ切り替え
$(function(){
$('.tab').on('click',function(){
var idx=$('.tab').index(this);
$(this).addClass('active').siblings('.tab').removeClass('active');
$(this).closest('.tab-area').next('.panel-area').find('.panel').removeClass('active');
$('.panel').eq(idx).addClass('active');
});
});単独設置したタブ切り替えの場合
SIM念の為に上で紹介したコードを使って単独設置した場合のCodePenも置いておきますので、動作確認やコードをご覧下さい。
（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）
See the Pen タブ切り替え | jQuery | 単独設置 by Satoru Shimizu (@sat-simizu) on CodePen.
SIMコードはHTMLがタブ１個分に減っただけで、他は複数設置で紹介したのとまったく同じです。
単独設置の場合のシンプルなタブ切り替え（jQuery）実装法
SIM最後に、単独設置しかしない時に使うシンプルなコードも紹介しておきます。
一般的にネットで紹介されているタブの実装方法はこのパターンです。
（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）
See the Pen タブ切り替え | jQuery | シンプルな単独設置 by Satoru Shimizu (@sat-simizu) on CodePen.
SIMHTMLとCSSは上の例と全く同じでなので省略します。
JavaScript（jQuery）の構造
SIMjQueryはタブ切り替えでよく見るタイプのシンプルなコードですね。
// タブ切り替え
$(function() {
$('.tab').on('click', function() {
$('.tab, .panel').removeClass('active');
$(this).addClass('active');
var index = $('.tab').index(this);
$('.panel').eq(index).addClass('active');
});
});まとめ
SIM以上、jQueryタブ切り替えの実装方法について紹介したので、コピペなどで活用してみて下さい。
