ページのリロードまたは外部リンク経由でブートストラップ タブに直接移動するにはどうすればよいですか?

ページのリロードまたは外部リンクでブートストラップ タブに直接移動します

Web アプリケーションでブートストラップ タブを使用する場合、ユーザーは次のような必要に遭遇することがあります。ページが最初に読み込まれたとき、または外部からクリックされたときに、特定のタブに直接移動します。 link.

問題:

次の HTML コードを考えてみましょう:

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

リンクの目的は、それぞれのホームとリンクに移動することです。外部からクリックしたときの「メモ」タブ

解決策:

この機能を実現するには、次の JavaScript コードを利用できます:

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

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

このコードは次のアクションを実行します。 :

• タブへのリンクを有効にする: の場合ページがロードされると、コードは URL のハッシュ部分 (#home または #notes) を識別し、ナビゲーション バーの対応するタブを自動的にアクティブにします。
• ページ再読み込みのハッシュを変更します:ユーザーがタブ間を移動すると、コードは URL 内のハッシュを更新して、選択したタブを反映します。こうすることで、ページがリロードされると、自動的に正しいタブに移動します。

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