jQueryでタブ切り替え型のメニューを作成する方法を紹介いたします。
簡単なデモページを作成しましたので、動きについては以下をご参照ください。
タブの中には、画像やリンク、テーブルなどを入れることが可能です。
ステップ1. HTMLのマークアップ
まずはタブメニューと中身をマークアップしていきます。HTMLは以下のように記述しましょう。
<div id="tabs">
<ul>
<li><a href="#panel1">タブ1</a></li>
<li><a href="#panel2">タブ2</a></li>
<li><a href="#panel3">タブ3</a></li>
<li><a href="#panel4">タブ4</a></li>
<li><a href="#panel5">タブ5</a></li>
</ul>
<div id="panel1" class="panel">
タブ1の内容
</div>
<div id="panel2" class="panel">
タブ2の内容
</div>
<div id="panel3" class="panel">
タブ3の内容
</div>
<div id="panel4" class="panel">
タブ4の内容
</div>
<div id="panel5" class="panel">
タブ5の内容
</div>
</div>タブメニュー全体を#tabsで包括し、各タブの内容に.panelを付与します。
また、タブの中身には、タブメニューに対応するIDを付与します。上記の場合、タブ1は#panel1、タブ2は#panel2というようにしているので、タブ1をクリックすると#panel1の内容が表示されます。
ステップ2. jQueryの実装
続いて、jQueryを実装します。記述する箇所は</body>の直前で大丈夫です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$('#tabs a[href^="#panel"]').click(function(){
$('#tabs .panel').hide();
$(this.hash).fadeIn();
return false;
});
$('#tabs a[href^="#panel"]:eq(0)').trigger('click');
});
</script>まず最初にjQueryをロードしています。ファイルをダウンロードして、サーバー上に設置してもOKです。
$(“#tabs .panel”).hide();で、表示しているタブの中身以外は非表示にしています。
ステップ3. CSSの調整
最後にCSSで見た目を整えて完成です。
#tabs {
overflow: hidden;
margin: 15px auto 0;
width: 730px;
}
#tabs ul {
overflow: hidden;
list-style: none;
border-bottom: 1px solid #eee;
margin: 0;
}
#tabs li {
background: #ddd;
padding: 8px 43px;
float:left;
margin-right: 5px;
cursor:pointer;
}
#tabs li a {
color: #373737;
font-weight: bold;
text-decoration: none;
}
#tabs .panel {
background: #EFEFEF;
padding: 10px;
display: none;
overflow: hidden;
}デモページでは、上記のようにしています。お好みで変更しましょう。
タブにa要素を使いたくない場合
同じページ内で内部リンクのスムーススクロールを実装している場合は、タブをクリックした時にスムーススクロールが発動してタブがうまく動いてくれません。
そういった場合は、タブにa要素を使わずにタブを実装する方法をお試しください。a要素を使わずに実装する場合は、下記のようにします。
HTMLは上述した内容とほぼ同じです。タブのa要素を除去して、最初に表示されるタブとパネルにクラスを付与しています。
<div id="tabs">
<ul>
<li class="is-active">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
<li>タブ5</li>
</ul>
<div class="panel is-show">
タブ1の内容
</div>
<div class="panel">
タブ2の内容
</div>
<div class="panel">
タブ3の内容
</div>
<div class="panel">
タブ4の内容
</div>
<div class="panel">
タブ5の内容
</div>
</div>CSSで.is-showが付いていない.panelを非表示にします。
#tabs .panel {
display: none;
}
#tabs .panel.is-show {
display: block;
}jQueryは以下のように記述します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$('#tabs li').click(function() {
var index = $('#tabs li').index(this); //何番目のタブがクリックされたかを格納
$('#tabs li').removeClass('is-active');
$(this).addClass('is-active');
$('#tabs .panel').removeClass('is-show').eq(index).addClass('is-show'); //○番目のコンテンツのみを表示
});
});
</script>クリックされたタブと同じ順番の.panelを表示させるようにすることで、タブ切り替えを実現しています。クリックされたタブには.is-activeが追加されるので、あとはCSSで見た目を変化させてあげればOKです。
あとがき
どちらの方法も結構簡単に実装できますね。タブで切り替えるメニューを導入する際は、ぜひ参考にしていただければと思います。