外部リンクから、またはページの更新後に特定のブートストラップ タブに移動するにはどうすればよいですか?

外部リンクまたはページ更新から Twitter ブートストラップ タブに移動する

Twitter のブートストラップ タブを Web ページに組み込む場合、外部リンクから、またはページのリロード時に特定のタブに直接移動します挑戦的になる可能性があります。この記事では、タブ間をシームレスに遷移できるようにする解決策について詳しく説明します。

問題の背景

ブートストラップ タブを利用するafacility.phpというページがあり、特定のタブに移動したいとします。外部ページから。たとえば、次のリンクをクリックすると、

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

それぞれ [ホーム] タブと [メモ] タブが表示されます。ただし、外部ページからの直接ナビゲーションでは、この遷移は発生しません。

解決策

この問題に対処するために、次の JavaScript コードを採用します。

// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
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;
})

Let'sソリューションの各部分を調べます:

• 最新情報の取得Tab: コードの最初の部分 (hash = location.hash.replace(/^#/, '')) は、URL から現在のタブのフラグメント識別子 (#home または #notes) を取得します。
• 目的のタブのアクティブ化: 次に、.nav-tabs a[href="hash"] を使用して、対応するタブ要素を選択しますフラグメント識別子に。最後に、.tab('show') を使用して、選択したタブをアクティブにします。
• ページのリロード時の URL の更新: コードの 2 番目の部分 (window.location.hash = e) .target.hash) は、ページが更新されたときに、アクティブ化されたタブと一致するように URL のフラグメント識別子を更新します。これにより、ページがリロードされた後でも現在のタブが確実に保持されます。

このソリューションを使用すると、外部リンクから、またはページの更新時に特定の Bootstrap タブに簡単に直接移動できるようになり、ユーザー エクスペリエンスが向上します。

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