パーマリンクで表示を切り替えるタブ機能の実装方法

Posted on by

リンクにパーマリンクを使用して表示を変えるには、
URLのハッシュ部分を使用して表示内容を切り替える方法があります。
これにより、特定のタブを直接表示するリンクを作成できます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>パーマリンクで表示を切り替えるタブ機能の実装方法</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>パーマリンクで表示を切り替えるタブ機能の実装方法</h1>
    <div class="plan-nav">
        <a href="#plan-1" class="plan-nav__item plan-nav__item--1 active">Plan 1</a>
        <a href="#plan-2" class="plan-nav__item plan-nav__item--2">Plan 2</a>
        <a href="#plan-3" class="plan-nav__item plan-nav__item--3">Plan 3</a>
    </div>

    <div class="plan-details">
        <div id="plan-1" class="plan-detail-header">Details of Plan 1</div>
        <div id="plan-2" class="plan-detail-header" style="display:none;">Details of Plan 2</div>
        <div id="plan-3" class="plan-detail-header" style="display:none;">Details of Plan 3</div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSSコードを追加

.plan-nav__item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    display: inline-block;
    background-color: #f0f0f0;
}

.plan-nav__item.active {
    background-color: #00aaff;
    color: #fff;
}

.plan-detail-header {
    display: none;
}

.plan-detail-header:first-child {
    display: block;
}

JavaScript

function chg_plan(a) {
    // すべての.plan-nav__itemからactiveクラスを削除
    $('.plan-nav__item').removeClass('active');
    // 指定されたプラン番号の.plan-nav__itemにactiveクラスを追加
    $('.plan-nav__item--' + a).addClass('active');
    // すべての.plan-detail-headerを非表示
    $('.plan-detail-header').hide();
    // 指定されたプラン番号の.plan-detail-headerを表示
    $('#plan-' + a).show();
}

$(document).ready(function() {
    // ページ読み込み時にURLのハッシュ部分を確認
    var hash = window.location.hash;
    if (hash) {
        // ハッシュからプラン番号を取得
        var planNumber = hash.replace('#plan-', '');
        // 該当するプランを表示
        chg_plan(planNumber);
    }

    // ハッシュの変更を監視して表示を切り替える
    $(window).on('hashchange', function() {
        var hash = window.location.hash;
        var planNumber = hash.replace('#plan-', '');
        // 該当するプランを表示
        chg_plan(planNumber);
    });

    // 初期表示の設定（ハッシュがない場合に最初のプランを表示）
    if (!hash) {
        chg_plan(1);
    }
});

詳細説明

  1. chg_plan関数:
    • この関数は、特定のプランを表示し、それ以外のプランを非表示にするために使用されます。
    • $('.plan-nav__item').removeClass('active'); では、すべてのプランナビゲーションアイテムからactiveクラスを削除します。
    • $('.plan-nav__item--' + a).addClass('active'); では、指定されたプラン番号のナビゲーションアイテムにactiveクラスを追加します。
    • $('.plan-detail-header').hide(); では、すべてのプラン詳細を非表示にします。
    • $('#plan-' + a).show(); では、指定されたプラン番号のプラン詳細を表示します。
  2. $(document).ready関数:
    • ページが読み込まれたときに実行される関数です。
    • var hash = window.location.hash; でURLのハッシュ部分を取得します。
    • if (hash) 条件文で、ハッシュが存在する場合、プラン番号を抽出して該当するプランを表示します。
    • $(window).on('hashchange', function() { ... }); では、ブラウザの戻る/進むボタンでハッシュが変更されたときに実行されるイベントリスナーを設定します。
    • 再度ハッシュを取得し、該当するプランを表示します。
    • if (!hash) { chg_plan(1); } では、ハッシュがない場合に最初のプランを表示します。

まとめ

この手順に従うことで、パーマリンクによって表示内容が変わる
タブ切り替え機能を持つブログ記事を作成できます。