タブパネル - web-0127のブログ

タブパネルとは

タブの切替は複数のコンテンツの表示・非表示を操作してコンテンツが変わっているように見せる
要素を非表示にするには hideメソッドを使い、表示には showメソッドを使う
パネルの順番とコンテンツの順番が比例している場合は、indexメソッドで何番目の要素が選択されているかを取得して、その番号のコンテンツを表示させる

一般的なタブパネル用のHTML

<div class="tab">
<ul class="menu">
  <li><a href="#">おすすめ</a></li>
  <li><a href="#">イベント</a></li>
  <li><a href="#">お知らせ</a></li>
</ul>
<div class="tabBox"><p>ここにおすすめの内容が入ります。</p></div>
<div class="tabBox"><p>ここにイベントの内容が入ります。</p></div>
<div class="tabBox"><p>ここにお知らせの内容が入ります。</p></div>
</div>

セマンティックなマークアップの視点から見ると正しくはありません。
しかし、パネルとコンテツがこの並びにすると作成しやすいため、jQueryを使ってこの並びにしていきます。

正しいマークアップ

<div class="tab">
<div class="tabBox">
  <h4 class="tabMenu">おすすめ</h4>
  <p>ここにおすすめの内容が入ります。</p>
</div><!-- /.tabBox -->
<div class="tabBox">
  <h4 class="tabMenu">イベント</h4>
  <p>ここにイベントの内容が入ります。</p>
</div><!-- /.tabBox -->
<div class="tabBox">
  <h4 class="tabMenu">お知らせ</h4>
  <p>ここにお知らせの内容が入ります。</p>
</div><!-- /.tabBox -->
</div><!-- /.tab -->

タブパネルを作成

タブパネルのグループを作成

「.tab」がしてされた要素内の先頭に、「.menu」が指定されたdiv要素作成します
prepend( )メソッドは、要素内の先頭にコンテンツを作成します

  $('.tab').prepend('<div class="menu"></div>');

つまり、

$('.tab')の１番めの子要素として次のコンテンツを作成する「<div class="menu"></div>」

タブパネルのグループの中に要素を移動

「.menu」の中に「.tabMenu」が設定された要素を移動する
prepend( )メソッド
要素を作成する場合は、「$(作成する場所) .prepend( 作成する要素)」
要素を移動する場合は、「$(移動させる場所) .prepend( 移動させる要素を参照)」

  $('.menu').prepend($('.tabMenu'));

指定された要素の子要素を a要素で囲む

「.tabMenu」が指定された要素の子要素を a要素で囲みます
wrapInner( )メソッドは、参照した要素の子要素を指定した要素で囲みます

  $('.tabMenu').wrapInner('<a href="javascript: void(0);"></a>');

まとめると、以下のようになります。

$(function(){

  $('.tab').prepend('<div class="menu"></div>');
  $('.menu').prepend($('.tabMenu'));
  $('.tabMenu').wrapInner('<a href="javascript: void(0);"></a>');

});

consoleで確認すると以下のようになります

f:id:web-design-lesson:20160524053952j:plain

はじめに表示されるコンテンツを設定

$( '.tab .tabBox' ) .の中で次の条件にあう要素を除外して
($( '.tab .tabBox' ) .の１つ目) .非表示にする

notメソッドを使い、「current」の設定されている要素以外を、hideメソッドで非表示にしています
「current」の値が「0」となっているため、１つ目の「.tabBox」が取得されています

  var current = 0;
  var show = $('.tab .tabBox').eq(current);
  $('.tab .tabBox').not(show).hide();
  $('.tab .tabMenu').eq(current).find('a').addClass('current');

notメソッドは、要素参照から指定した条件の要素を除外します
eqメソッドは、要素参照の中から指定した順番にある要素を指定します
「.tabBox」に該当する要素が３つある場合は、「0」と指定すると１つ目の要素だけを参照します
hideメソッドは、参照した要素を非表示にします
表示されているコンテンツに対応した「.tabMenu」に「.current」を指定します
addClassメソッドは、参照した要素に指定したクラスを追加します
そのクラスを削除したい場合は、removeClassメソッドを指定します

コンテンツを切り替える

クリックイベントを使用しナビゲーションパネルを選択したとき、対応したコンテンツが表示されるようにする

コンテンツの表示・非表示

    $('.tab .tabBox').hide().eq($('.menu a').index(this)).show();
  });

「.tabBox」が指定された要素を１度すべて表示にします
その後、選択したナビゲーションパネルの順番に応じたコンテンツを、showメソッドで表示します
選択されたナビゲーションパネルの順番を決めるには、indexメソッドを使用します
「$('.menu a').index(this)」は、「this」が「clickイベントを発生させた要素」とい意味になります

クラスの切り替え

    $('.tab .tabMenu a').removeClass('current');
    $(this).addClass('current');
  });

一度すべての「.current」を削除して、選択されたナビゲーションパネルのみに「.current」を追加しています

  $('.menu a').on('click', function(){
    $('.tab .tabBox').hide().eq($('.menu a').index(this)).show();
    $('.tab .tabMenu a').removeClass('current');
    $(this).addClass('current');
    return false;
  });

「return false;」は、a要素がクリックされた際の動作をキャンセルしています