jquery - ページの再読み込みで特定のタブに移動するか、AJAX によってタブが読み込まれるハイパーリンクに移動します

Question

Bootstrap タブのセットがあります。

HTML

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#main" role="tab" data-toggle="tab" data-url="~/ccf/main">Main</a></li>
    <li><a href="#userinfo" role="tab" data-toggle="tab" data-url="~/ccf/userinfo">User Info</a></li>

   ...
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="main"></div>
  <div class="tab-pane" id="userinfo"></div>
  ...
</div>

JS

var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
}

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


// load first tab content if it is AJAX
$('#main').load($('a[data-url]:first').attr("data-url") +  "&silent=1", function (data) {
    $('.active a').tab('show');
});

私が望むのは、常に最初にロードするのではなく、フォーカスのあるタブがロードされることです。

更新: タブにフォーカスを当てています。それはAJAXロードを起動しないだけです

これは、Twitter Bootstrap タブとは異なります。ページのリロードまたはハイパーリンクで特定のタブに移動します。