URL を介してプログラムで特定のブートストラップ タブに移動するにはどうすればよいですか?

Bootstrap の特定のタブへの移動

Bootstrap タブを使用する場合、タブから特定のタブに直接リンクするという課題が発生する場合があります。外部ソース。ユーザーが外部リンクから目的のタブにシームレスにアクセスできるようにしたい場合、これは不便になる可能性があります。この問題を解決する方法は次のとおりです:

タブへの直接リンクを有効にするには、次の JavaScript ソリューションを実装します:

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

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

このスクリプトを配置して、次のような外部リンクをクリックします:

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

は、ユーザーをそれぞれ [ホーム] タブと [メモ] タブに直接移動できるようになりました。さらに、ページ内でタブが選択されると、それに応じて URL のハッシュが変更され、ページがリロードされた後でもタブの選択が保持されます。

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