ブートストラップタブが表示されました。ページ読み込み時に.bs.tabが起動しません。

Question

ページにいくつかのタブがあり、ページが読み込まれたときにそのタブをアクティブに保ちようとしています。私は、URLにプッシュハッシュすることによって、これを実行します。

$('.nav-tabs a[data-toggle="tab"]').click(function() { 
    window.history.pushState("", "", $(this).attr('href')); 
}); 

上記のコードで、私は、ユーザーがページをリロードする場合でも、タブアクティブに保ちます。

私はshown.bs.tabイベントをキャッチしようとしているが、どうやらイベントは、ページのリロードでトリガされていないが、他のタブが

$('.nav-tabs a[data-toggle="tab"]').on('shown.bs.tab', function() { 
    //do something 
}); 

私が間違ってやっている任意のアイデアをクリックされたときに、それは動作しますか？

編集

activeクラスは両方とも私も手動でtab.showイベントを呼び出すために試してみたliとdiv.tab-pane

から削除されますが、それはあなたのことを確認してください

var hash = window.location.hash; 
if(hash) { 
    $('.nav-tabs a[href="' + hash + '"]').tab('show'); //or trigger('click') 
} 

Answer 1

すでに示されたタブ上のイベントを発生しません.tab('show');のように思えます。

は、代わりに私が.trigger('shown.bs.tab');に置き換えたのだが、それが必要として働いているので、私のコードは次のようになります。

トリガされる何

var hash = window.location.hash; 
if (hash) { 
    $('.nav-tabs a[href="' + hash + '"]').trigger('show.bs.tab'); 
} 

Answer 2

助けにはなりませんshown.bs.tabハンドブックをの前に付けてください。.tab('show')：

// wire up shown event 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    console.log("tab shown..."); 
}); 

// read hash from page load and change tab 
var hash = document.location.hash; 
var prefix = "tab_"; 
if (hash) { 
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show'); 
} 

ブートストラップ4 - リロード上のアクティブなタブを選択し

コード：http://www.codeply.com/go/Yu8wbjeGMZ
デモ：http://www.codeply.com/render/Yu8wbjeGMZ#tab2