タブメニューは少ない表示領域に多くの情報を表示する際に便利で、webサイトでもよく導入される機能になります。このタブメニューですが、jQueryを利用することでとても簡単に実装できるようになります。
今回は、このタブメニューの実装について解説していきます。
タブメニューとは
タブメニューとは、タブをクリックし表示コンテンツを切り替える機能になります。
限られたエリアに多くのコンテンツを表示することが可能になるため、コンテンツ量の多いページなどに採用されることが多いです。
Yahoo!JAPANなどでも採用されています。
HTMLを記述
以下、HTMLコードとなります。
<div class="tab">
<!-- タブを構成するブロック -->
<div class="tab-list">
<button class="tab-list-item is-btn-active">タブ1</button>
<button class="tab-list-item">タブ2</button>
<button class="tab-list-item">タブ3</button>
<button class="tab-list-item">タブ4</button>
</div>
<!-- コンテンツを構成するブロック -->
<div class="tab-contents-wrap">
<div class="tab-contents is-contents-active">
<p>タブメニューテキスト１。タブメニューテキスト１。タブメニューテキスト１。</p>
</div>
<div class="tab-contents">
<p>タブメニューテキスト2。タブメニューテキスト2。タブメニューテキスト2。</p>
</div>
<div class="tab-contents">
<p>タブメニューテキスト3。タブメニューテキスト3。タブメニューテキスト3。</p>
</div>
<div class="tab-contents">
<p>タブメニューテキスト4。タブメニューテキスト4。タブメニューテキスト4。</p>
</div>
</div>
</div>タブメニューは、タブとコンテンツの2ブロックから構成されます。
指定しているクラスが多いですが、HTMLの構造はシンプルですね。
タブボタンは、アクセシビリティを考慮し、buttonで実装しています。
CSSを記述
以下、CSSコードとなります。
.tab{
max-width: 600px;
margin: 0 auto;
}
.tab-list{
display: flex;
}
.tab-list-item{
width: 25%;
text-align: center;
padding: 8px 0;
cursor: pointer;
}
.tab-contents{
background-color: #ffede2;
display: none;
padding: 20px;
}
.is-btn-active{
background-color: #ffede2;
font-weight: bold;
}
.is-contents-active{
display: block;
}CSSに関しても、特に難しい点はないかと思います。
それでは、個別に解説していきたいと思います。
.tab-list{
display: flex;
}
.tab-list-item{
width: 25%;
text-align: center;
padding: 8px 0;
cursor: pointer;
}タブのスタイルになります。
flexboxを利用し、タブを横並びにしています。
.tab-contents{
background-color: #ffede2;
display: none;
padding: 20px;
}コンテンツのスタイルになります。display: none;を指定し、全てのコンテンツを非表示にします。
.is-btn-active{
background-color: #ffede2;
font-weight: bold;
}.is-btn-activeには、選択中のタブのスタイルを指定します。
選択中のタブは、背景色とフォントの太さを変更します。
.is-contents-active{
display: block;
}.is-contents-activeは、コンテンツを表示するためのクラスとなります。.is-contents-activeが指定されたコンテンツのみが表示されます。
jQueryを記述
以下、jQueryコードとなります。
$(function(){
$('.tab-list-item').on('click', function(){
let index = $('.tab-list-item').index(this);
$('.tab-list-item').removeClass('is-btn-active');
$(this).addClass('is-btn-active');
$('.tab-contents').removeClass('is-contents-active');
$('.tab-contents').eq(index).addClass('is-contents-active');
});
}); それでは、個別に解説していきたいと思います。
$('.tab-list-item').on('click', function(){
});タブである.tab-list-itemに.on()メソッドを指定し、イベントが発火したタイミングで表示切り替え処理を実行します。
let index = $('.tab-list-item').index(this);タブメニューは、タブがクリックされた際に、「何番目のタブ」がクリックされたかを取得し、それに該当するコンテンツを表示する仕組みとなっています。1番目のタブがクリックされたら、1番目のコンテンツを、2番目のタブがクリックされたら、2番目のコンテンツを表示します。
この「何番目」を取得するのが、index()メソッドです。
index()は、指定した要素のindex番号を返します。引数にthisを指定することで、「イベントが発生した要素」のindex番号を取得することができます。
また、index番号はゼロから始まりますので注意してください。タブ1をクリックすると変数indexには「0」が、タブ2をクリックすると変数indexには「1」が格納されます。
$('.tab-list-item').removeClass('is-btn-active');
$(this).addClass('is-btn-active');上記は、タブの切り替え処理になります。まず始めにタブがクリックされたタイミングで、.is-btn-activeを削除し、選択中のタブのスタイルをリセットします。クラスの削除を行なっているのが、removeClass()メソッドで引数に削除したいクラスを指定します。セレクタの指定とは異なりクラス名に.は含めませんので注意してください。また、複数指定する際は、スペース区切りで記述します。
続いて、クリックされたタブに.is-btn-activeを指定する処理を見ていきましょう。
イベントが発生した要素は、thisに格納されますので、thisに対してaddClass()メソッドを指定します。addClass()は、クラスを追加するメソッドとなります。引数には追加したいクラスを指定します。
$('.tab-contents').removeClass('is-contents-active');
$('.tab-contents').eq(index).addClass('is-contents-active');上記は、コンテンツの切り替え処理になります。
タブの切り替え同様、タブがクリックされたタイミングで、.is-contents-activeを削除し、表示中のコンテンツを非表示にします。
2行目は、該当コンテンツを表示する処理です。
eq()は、複数存在する要素(正確にはjQueryオブジェクト)から、特定の要素を選択するメソッドです。引数には、選択したい要素のindex番号を指定します。従って、eq(index)と引数に変数indexを指定することで、クリックされたタブに該当するコンテンツが選択されます。該当コンテンツの選択が完了したら、最後にaddClass()を指定し.is-contents-activeを追加します。
以上でタブメニューの実装が完了となります。
今回紹介したメソッドや処理は様々な場面で活用しますので、ご自身でもう一度調べてみてください！
タブメニューを導入する際の注意
今回は、タブメニューについて解説しました。
タブメニューは、少ない表示領域に多くの情報を表示する際に便利とお伝えしました。
しかし、タブメニューやスライダーなどは、全てのコンテンツが常に表示されているわけではありません。このようなユーザーに操作や閲覧を委ねる機能は全てのコンテンツを閲覧されることは難しいということを理解しておきましょう。従って、本当に大切な情報は、タブメニューやスライダー等は利用せずに表示するようにしましょう。
