jQueryで実装するタブ切り替え機能

Posted on by

Webサイトでよく見かける「タブ切り替え機能」。例えば、商品情報の詳細ページやFAQなど、複数の情報を整理して表示する際に便利です。今回は jQueryを使って簡単にタブ切り替えを実装する方法 を解説します。

完成イメージ

以下のようなタブ切り替えを実装します。

  • クリックしたタブに対応するコンテンツを表示
  • アクティブなタブのデザインを変更

HTMLの構造

まずは、基本的なHTMLを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueryのタブ切り替え</title>
    <style>
        .tab-menu { display: flex; }
        .tab-menu li {
            list-style: none;
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid #ccc;
            background: #f9f9f9;
        }
        .tab-menu li.active {
            background: #0073e6;
            color: #fff;
        }
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
        .tab-content.active { display: block; }
    </style>
</head>
<body>

<ul class="tab-menu">
    <li class="active" data-tab="tab1">タブ1</li>
    <li data-tab="tab2">タブ2</li>
    <li data-tab="tab3">タブ3</li>
</ul>

<div id="tab1" class="tab-content active">タブ1の内容</div>
<div id="tab2" class="tab-content">タブ2の内容</div>
<div id="tab3" class="tab-content">タブ3の内容</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $(".tab-menu li").click(function(){
        var tab_id = $(this).data("tab");

        $(".tab-menu li").removeClass("active");
        $(".tab-content").removeClass("active");

        $(this).addClass("active");
        $("#" + tab_id).addClass("active");
    });
});
</script>

</body>
</html>

解説

① HTMLのポイント

  • .tab-menu 内にタブのリストを作成
  • .tab-content に各タブのコンテンツを用意
  • data-tab 属性を利用して、対応するコンテンツを紐付け

② CSSのポイント

  • display: none; でコンテンツを非表示
  • .active クラスで表示/非表示を切り替え
  • .tab-menu li.active でアクティブなタブのデザインを変更

③ jQueryの処理

  1. クリックイベントを設定jsコピーする編集する$(".tab-menu li").click(function(){
  2. クリックされたタブの data-tab 属性を取得jsコピーする編集するvar tab_id = $(this).data("tab");
  3. すべてのタブとコンテンツの active クラスを削除jsコピーする編集する$(".tab-menu li").removeClass("active"); $(".tab-content").removeClass("active");
  4. クリックされたタブと対応するコンテンツに active を付与jsコピーする編集する$(this).addClass("active"); $("#" + tab_id).addClass("active");

デザインを少し改善

少しデザインを整えて、より見やすくします。

.tab-menu {
    display: flex;
    border-bottom: 2px solid #0073e6;
}

.tab-menu li {
    list-style: none;
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #f9f9f9;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    transition: 0.3s;
}

.tab-menu li.active {
    background: #0073e6;
    color: #fff;
    font-weight: bold;
    border-bottom: none;
}

.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    border-top: none;
    background: #fff;
}

.tab-content.active {
    display: block;
}

応用編

✔️ タブのアニメーションを追加

タブの切り替え時に フェードイン効果 を追加すると、よりスムーズになります。

$(".tab-menu li").click(function(){
    var tab_id = $(this).data("tab");

    $(".tab-menu li").removeClass("active");
    $(".tab-content").removeClass("active").hide();

    $(this).addClass("active");
    $("#" + tab_id).fadeIn().addClass("active");
});

まとめ

  • タブ切り替え は data-tab を利用するとシンプルに実装できる
  • CSS で .active クラスを付与/削除することで表示を切り替える
  • フェードインアニメーション などを加えるとより自然な動きに

タブ切り替えは UI/UX 向上に役立つ ので、ぜひ活用してください！