外部リンクを使用して特定のブートストラップ タブに移動するにはどうすればよいですか?

外部ハイパーリンクから特定の Twitter ブートストラップ タブに移動する方法

Twitter ブートストラップ タブは、コンテンツを個別のセクションに整理する便利な方法を提供します。ただし、外部リンクから特定のタブにアクセスすると問題が発生する可能性があります。この記事ではこの問題に対処し、任意のタブに直接移動できる解決策を説明します。

問題の説明

次の HTML 構造を考えてみましょう:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

外部ページからクリックすると、これらのリンクは指定されたタブ (「ホーム」と「メモ」) に移動する必要があります。

解決策

JavaScript を利用してこの機能を実現します:

// Enable tab navigation from links
var hash = location.hash.replace(/^#/, '');
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
}

// Update hash on tab activation
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
});

説明

show.bs.tab イベント ハンドラーは、タブがアクティブ化されるとトリガーされます。このハンドラー内で、現在アクティブなタブを反映するためにブラウザーのハッシュを更新します。これにより、JavaScript でタブに移動するときにハッシュが正しく更新され、ユーザーがページをリロードしたときに目的のタブにアクセスできるようになります。

以上が外部リンクを使用して特定のブートストラップ タブに移動するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。