jQuery、タブ切り替えでプロフィール表示

タブ切り替えは、ウェブページで複数のコンテンツを一つのスペースに効果的に表示する方法です。ユーザーがタブをクリックすると、関連するコンテンツが表示されます。

メリットとしては、情報を整理して表示できるため、ページのスペースを節約し、ユーザーのナビゲーションを改善します。特にフォームや情報カテゴリの切り替え、複数のデータやオプションの表示などに便利です。

タブ切り替えのコード
まとめ

タブ切り替えのコード

コードを分かりやすくなるように、非常にシンプルなコードにしております。それぞれのタブをクリックするとタブのコンテンツが表示されます。デザインは一切していないので非常に見にくいと思います。

See the Pen jQuery、tabshow2 by sho-ta (@sho-ta) on CodePen.

jQuery、htmlのコードはそのままで、CSS、スタイルを見やすく変更しました。

See the Pen jQuery、tabshow3 by sho-ta (@sho-ta) on CodePen.

こちらもCSSだけ変更しています。タブは左のサイドメニューに配置、コンテンツは中央に配置しています。

See the Pen jQuery、tabshow4 by sho-ta (@sho-ta) on CodePen.

次に、jQueryを使用して操作を実装します。これまでは、タブをクリックするとコンテンツが表示されるだけで、再度クリックしても非表示になりませんでした。次は、再度クリックすることでコンテンツを非表示にする機能を追加します。

//クリック後表示、もう一度クリック後非表示にならない
$(document).ready(function() {
  // タブメニュー要素にクリックイベントを設定
  $('.tab-menu').on('click', function() {
    // クリックされたタブのdata-tab属性値を取得
    var tabId = $(this).data('tab');

    // すべてのタブコンテンツからアクティブクラスを削除
    $('.tab-content').removeClass('active');
    // 対応するタブコンテンツにアクティブクラスを追加
    $('#tab-' + tabId).addClass('active');
  });
});


//クリック後表示、もう一度クリック後非表示
$(document).ready(function() {
  // タブメニュー要素にクリックイベントを設定
  $('.tab-menu').on('click', function() {
      // クリックされたタブのdata-tab属性値を取得
      var tabId = $(this).data('tab');
      // 対応するタブコンテンツ要素を取得
      var content = $('#tab-' + tabId);

      // タブメニューとタブコンテンツのアクティブ状態を切り替え
      $(this).toggleClass('active');
      content.toggleClass('active');
  });
});

JavaScript

これでタブを何度かクリックすると表示、非表示になりました。

See the Pen jQuery、tabshow6 by sho-ta (@sho-ta) on CodePen.

先ほどのコードをご覧いただけましたでしょうか。コード自体にはエラーはなく動作も問題ありませんが、見た目に違和感を感じたかもしれません。具体的には、別のタブをクリックすると、内容が二重で表示されることがあったのではないでしょうか。次に、二重表示を防ぐために、if 文を使った条件分岐を追加して対応します。

$(document).ready(function() {
    // タブメニュー要素にクリックイベントを設定
    $('.tab-menu').on('click', function() {
        // クリックされたタブのdata-tab属性値を取得
        var tabId = $(this).data('tab');
        var content = $('#tab-' + tabId);

        // タブがアクティブな場合は、アクティブ状態を解除し、そうでない場合はアクティブ状態にする
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            content.removeClass('active');
        } else {
            // すべてのタブメニューとタブコンテンツからアクティブクラスを削除
            $('.tab-menu').removeClass('active');
            $('.tab-content').removeClass('active');

            // クリックされたタブメニューと対応するタブコンテンツにアクティブクラスを追加
            $(this).addClass('active');
            content.addClass('active');
        }
    });
});