Railsからはじめるプログラミング日記

駆け出しプログラマー(主にRuby on Rails)の業務で役立ったコードをメモしていくブログです。自分だけでなく誰かの役に立てれば本望です。

【jQuery】同一ページ内の複数タブ機能を実装

HTMLをいじってるとタブを実装したい場面はよく出てきますよね、トップページのお知らせとか。

ページ内にタブ1つだと実装はかんたんなのですが、複数あると全てのタブの動きが連動しちゃうとか、1つはうまくいっているのにもう一方は表示されなくなったとか…

この悩みはけっこうかんたんに解決できるので紹介します。

※コードは該当部分のみ抜粋
※js部分はscriptタグでくくってhtmlに書いてもいいし、別ファイルにして読み込んでもOKです

【html】

<div class="news">
  <h1>お知らせ</h1>
  <ul class="tabs">
    <li class="tab current"><span>お知らせ1</span></li>
    <li class="tab"><span>お知らせ2</span></li>
    <li class="tab"><span>お知らせ3</span></li>
    <li class="tab"><span>お知らせ4</span></li>
  </ul>
  <div class="news_wrap">
    <div class="scroll">
      <div class="panel is-show">お知らせ1の内容</div>
      <div class="panel">お知らせ2の内容</div>
      <div class="panel">お知らせ3の内容</div>
      <div class="panel">お知らせ4の内容</div>
    </div>
  </div>
</div>

<div class="reqruit">
  <h1>求人情報</h1>
  <ul class="tabs">
    <li class="tab current"><span>求人情報1</span></li>
    <li class="tab"><span>求人情報2</span></li>
    <li class="tab"><span>求人情報3</span></li>
    <li class="tab"><span>求人情報4</span></li>
  </ul>
  <div class="news_wrap">
    <div class="scroll">
      <div class="panel is-show">求人情報1の内容</div>
      <div class="panel">求人情報2の内容</div>
      <div class="panel">求人情報3の内容</div>
      <div class="panel">求人情報4の内容</div>
    </div>
  </div>
</div>

【js】

$(function(){
  $('.tab').on('click',function(){
    var idx=$('.tab').index(this);
    $(this).addClass('current').siblings('.tab').removeClass('current');
    $(this).closest('ul').next('.news_wrap').find('.panel').removeClass('is-show');
    $('.panel').eq(idx).addClass('is-show');
  });
});

$(this)とsiblings()やnext()、find()を使って、動作させる.panel要素を限定しています。

これでタブがいくらあっても干渉し合うことはありません。