jQueryでタブメニューを作る

サンプルはこちら。

See the Pen Basics of jQuery – Tab UI by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

タブUIを作るjQueryプラグインも存在しますが、プラグインに頼らず必要最低限なタブUIを作る方法です。

HTML

<ul class="tab">
  <li class="active">タブ1</li>
  <li>タブ2</li>
  ～
</ul>
<ul class="tabContent">
  <li class="active">タブ1の内容</li>
  <li>タブ2の内容</li>
</ul>

タブメニュー部分の「tab」のリストと、その内容となる「tabContent」のリストで構成され、有効なタブとその内容には「active」が付いています。

「tabContent」内の<li>は平時は非表示で、「active」が付いているもののみを表示させており、この「active」の付与・除去によってタブUIを表現しています。

JavaScript

$(function () {
  $('.tab > li').click(function() {
    var index = $('.tab > li').index(this);
    $('.tabContent > li').removeClass('active');
    $('.tabContent > li').eq(index).addClass('active')
    $('.tab > li').removeClass('active');
    $(this).addClass('active')
  });
});

「tab」内の<li>がクリックされた時に処理が始まります。

3行目でクリックされたタブが、「<ul>内で何番目の<li>なのか」という番号を「index」に格納しています。

4行目で、「tabContent」の<li>すべてから「active」を抜き非表示にしています。

5行目で、3行目で取得した順と同じ順にある「tabContent」の<li>に「active」を付与し表示させています。
例えば「tab」内の2番目の<li>がクリックされていたら、「tabContent」の2番目の<li>を表示させるといった形です。

6行目で、「tab」の<li>すべてから「active」を除去しています。

7行目で、クリックされた<li>自身へ「active」を付与しています。