deeplus+

  • jQuery

  • Tips

jQueryで追加のプラグイン不要のタブ

jQueryで動くタブのサンプルです。もっと効率の良いプラグインはいくらでもあるのですが...データの整理も兼ねて覚え書きです。

jQueryでTab

IE8+ / jQuery 2.2(1.12) 動作確認

DEMO

jQuery本体のみで動くタブの使い方

いつも通りjQuery本体を読み込みます。

<!--[if lt IE 9]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<![endif]-->

<!--[if gte IE 9]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!--<![endif]-->

タブのjs部分

タブ内容を2行目で指定、タブ切り替えのボタンを3行目で指定。タブのカレント表示用classを4行目で指定。

$(function(){
  var panel = ['#content1','#content2','#content3'];
  var btn =   ['#button1','#button2','#button3'];
  var activeClass = 'success';
  // 一旦すべてのコンテンツを非表示にする
  $('.content').hide();
  // 最初はコンテンツ１を表示する
  var $activePanel =  $(panel[0]).show();
  // 最初はボタン1の色を変える
  var $activeButton = $(btn[0]).addClass(activeClass);

  function tabPanelChange(n){
    // ボタンのイベント処理
    $(btn[n]).on('click',function(){
      // アクティブなボタンを非アクティブ表示にする
      $activeButton.removeClass(activeClass);
      // 現在表示されているコンテンツを非表示にする
      $activePanel.hide();
      // ボタンをアクティブ表示にする
      $(this).addClass(activeClass);
      // コンテンツを表示する
      $(panel[n]).fadeIn("slow");
      $activePanel = $(panel[n]);
      $activeButton = $(this);
      // #対応
      return false;
    });
  }
  // ボタンの数だけ実行
  for(var i = 0 ; i < btn.length ; i++){
    tabPanelChange(i);
  }
});

タブのhtml部分

カレント表示部分のclassはhtml側には記述していません。

<!--ボタン-->
<nav>
  <ul>
    <li><a href="#" id="button1">ボタン1</a></li>
    <li><a href="#" id="button2">ボタン2</a></li>
    <li><a href="#" id="button3">ボタン3</a></li>
  </ul>
</nav>

<!--コンテンツ1-->
<div class="content" id="content1">
  <section>
      〜 内容 〜
  </section>
</div>

<!-- コンテンツ２ -->
<div class="content" id="content2">
  <section>
      〜 内容 〜
  </section>
</div>

<!-- コンテンツ３ -->
<div class="content" id="content3">
  <section>
      〜 内容 〜
  </section>
</div>

タブのCSS部分

カレント表示部分だけ指定してあげれば、とりあえずは動きます。

/* ボタンをアクティブにする */
.success{color: #fff; background-color: #99cc33;}

参照元：