ブログBLOG

[jQuery]タブ切り替えをプラグインを使わずに自前で実装する

更新日：2017/06/26

eyechatch_2_tab_switching_with_jquery_170623
タブ切り替えを実装したいときに、jQueryのブラグインを利用するやり方もありますが、タブ切り替えくらいならプラグインを使わずに、自前で実装したほうがいろいろと軽快です。
js部分だけだと６～７行で記述できてしまいます。
ちなみに、このページのタブ切り替えは自前で作ったjsです。

プラグイン利用
自前で実装

<link rel="stylesheet" href="[パス]/jquery-ui.min.css">
<script type="text/javascript" src="[パス]/jquery-ui.min.js"></script>
<script type="text/javascript">
  $('#tab-ul').tabs();
</script>

$('#tab-ul').tabs();

</script>

合計サイズ：38KB

<script type="text/javascript">
(function ($) {
  $('#tab-ul li').on('click', function() {
    $('#tab-ul li').removeClass('current');  // いったん全てのタブの「current」クラスを消す
    $(this).addClass('current');  // 選択したタブにだけ「current」クラスを付ける
    
    var index = $('#tab-ul li').index(this);  // 選択したタブが何番目かを取得
    $('#tab-target-div .tab-target').hide();  // いったん全てのターゲットを非表示
    $('#tab-target-div .tab-target').eq(index).show();  // index番目のターゲットを表示
  });
})(jQuery);
</script>

(function ($) {

$('#tab-ul li').on('click', function() {

$('#tab-ul li').removeClass('current'); // いったん全てのタブの「current」クラスを消す

$(this).addClass('current'); // 選択したタブにだけ「current」クラスを付ける

var index = $('#tab-ul li').index(this); // 選択したタブが何番目かを取得

$('#tab-target-div .tab-target').hide(); // いったん全てのターゲットを非表示

$('#tab-target-div .tab-target').eq(index).show(); // index番目のターゲットを表示

});

})(jQuery);

</script>

合計サイズ：2KB

とはいえ、タブ切り替え時に効果を付けたい時は素直にプラグインを利用したほうが楽かもしれません。
以下で、フェード切り替えを自前で実装してみたら思ったより時間がかかってしまいました。
結果的にはせいぜい10行くらいのjsなのですが・・・。
でも一度作ってしまえば使いまわせますから便利ですね。

プラグイン利用
自前で実装

<link rel="stylesheet" href="[パス]/jquery-ui.min.css">
<script type="text/javascript" src="[パス]/jquery-ui.min.js"></script>
<script type="text/javascript">
  $('#tab-ul-2').tabs({ fx: { opacity: 'toggle' } });
</script>

$('#tab-ul-2').tabs({ fx: { opacity: 'toggle' } });

</script>

合計サイズ：38KB

<script type="text/javascript">
(function ($) {
  // 【前提】
  // cssにより、ターゲット対象を全てposition: absolute; opacity: 0; にして、
  // 透明にして重ねたような状態にしている。
  var AnimateSpeed = 400;
  $('#tab-target-div-2').css({ height: $('#tab-target-div-2 .tab-target.current').height() });  // 囲っているdivの高さを指定
  $('#tab-ul-2 li').on('click', function() {
    $('#tab-ul-2 li').removeClass('current');
    $(this).addClass('current');
    
    var index = $('#tab-ul-2 li').index(this);
    var $target = $('#tab-target-div-2 .tab-target').eq(index);  // ターゲットをキャッシュ
    $('#tab-target-div-2').css({ height: $target.height() });  // ターゲットの高さと囲っているdivの高さを揃える
    $target.siblings().animate({ opacity: 0 }, AnimateSpeed, function() {  // ターゲット以外のターゲット対象を徐々に透明にする
      $target.animate({ opacity: 1 }, AnimateSpeed );  // それが終わったらターゲットを徐々に可視化する
    });
  });
})(jQuery);
</script>