1. ホーム
  2. javascript

[解決済み] Twitter Bootstrapのタブ:ページの再読み込みやハイパーリンクで特定のタブに移動する

2022-03-14 01:59:39

質問

TwitterのBootstrapフレームワークとその BootstrapタブJS . いくつかの小さな問題を除いては、とてもうまく機能しています。そのうちの1つは、外部リンクから特定のタブに直接移動する方法がわからないことです。例えば、こんな感じです。

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

は、それぞれ「ホーム」タブと「ノート」タブに移動する必要があります 外部ページからのリンクがクリックされた場合

解決方法は?

遅ればせながら、この問題に対する私の解決策を紹介します。しかし、それは多分他の人の助けになることができます。

// 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;
})