タブ切り替え時にタイトルを変更する方法（jQuery）

Posted on by

タブ切り替え時にブラウザのタイトルを変更する方法について解説します。
この記事では、HTMLとjQueryを使ってタブ切り替え時に
タイトルを変更する具体的な実装方法を紹介します。

HTMLとjQueryの準備

まず、必要なHTML構造を用意し、
jQueryを使ってタブのクリックイベントに応じてタイトルを変更するスクリプトを追加します。

HTMLコード

以下のように、タブメニューと対応するコンテンツをHTMLで作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タブ０１タイトル初期表示</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .tab-list li {
            display: inline-block;
            padding: 10px;
            cursor: pointer;
        }
        .tab-list .active {
            font-weight: bold;
        }
        .tab-box .tab-content {
            display: none;
        }
        .tab-box .tab-content.open {
            display: block;
        }
    </style>
</head>
<body>
    <!-- タブメニュー -->
    <ul class="tab-list">
        <li class="active">タブ01</li>
        <li>タブ02</li>
        <li>タブ03</li>
    </ul>
    <div class="tab-box">
        <div class="tab-content open">タブ０１のコンテンツ</div>
        <div class="tab-content">タブ０２のコンテンツ</div>
        <div class="tab-content">タブ０３のコンテンツ</div>
    </div>
</body>
</html>

jQueryコード

次に、タブがクリックされたときにタイトルを変更するためのjQueryスクリプトを追加します。

<script type="text/javascript">
    $(function() {
        $('.tab-list li').click(function() {
            var index = $('.tab-list li').index(this);
            $('.tab-list li').removeClass('active');
            $(this).addClass('active');
            $('.tab-box .tab-content').removeClass('open').eq(index).addClass('open');
            var titles = ['タブ０１タイトル', 'タブ０２タイトル', 'タブ０３タイトル'];
            $('title').text(titles[index]);
        });
    });
</script>

実装解説

HTMLの構造

  • タブメニューは<ul>タグ内に<li>タグとして配置されています。
  • 各タブに対応するコンテンツは<div>タグ内に配置され、
    初期状態では最初のタブのコンテンツのみが表示されるようにしています。

CSSスタイル

  • .tab-list liにはインラインブロック表示とパディングを設定し、クリック可能にしています。
  • .tab-list .activeには太字スタイルを適用しています。
  • .tab-box .tab-contentはデフォルトで非表示にし、.tab-content.openが表示されるようにしています。

jQueryスクリプト

  • .tab-list liがクリックされたときにイベントが発火します。
  • クリックされたタブに対応するインデックスを取得し、activeクラスを切り替えます。
  • タブに対応するコンテンツを表示し、他のコンテンツは非表示にします。
  • インデックスに基づいてタイトルを変更します。

まとめ

この実装により、タブをクリックするたびに対応するコンテンツが表示され、
ブラウザのタイトルも動的に変更されます。
これにより、ユーザーエクスペリエンスを向上させることができます。
ぜひ、自分のプロジェクトに取り入れてみてください。