BLOG ブログ

ホームページ制作
BLOG
[jQuery]タブ切り替えをプラグインを使わずに自前で実装する

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

更新日：2017/06/27

タブ切り替えを実装したいときに、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>

(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>

合計サイズ：3KB

jQueryの公式プラグイン「jQuery UI」のフルバージョンだと250KB、タブ機能だけのバージョンでも40KB近くなので、自前で作ったコードで少しでも軽量化に貢献できると幸いです。

南本貴之

JavaScript jQuery サイト制作

一覧へ戻る

BLOG ブログ

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

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

BLOG ブログ

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

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ