nav-tabs
次の設定でBootstrapを使用しています。
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
<a href="#home">Home</a>
</form>
</div>
</div>
ご覧のとおり、profile
タブに最初のタブへのリンクがあります。アンカーをクリックすると、URLバーのURLが変更されますが、特定のタブにジャンプすることはありません。
次に、タブに直接リンクすることは一般的に不可能であることに気付いたので、Twitterブートストラップタブから次のコードを追加しました。ページの再読み込みまたはハイパーリンクで特定のタブに移動します。
// Javascript to enable link to tab
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;
})
これで、別の場所から特定のタブにリンクできますが、ナビゲーションバーと同じページにいる場合はリンクできません。ページをリロードすると目的のタブにジャンプするので、Javascriptのソリューションを使用して、ページを強制的にリロードできると思いました。アンカータグを使用してサイトを本当にリロードするにはどうすればよいですか。:
window.location.reload(true);
ただし、これはタブをクリックするたびにリロードされ、さらにhome
アンカーをクリックしてもタブがロードされませんでした。
id
したがって、別のタブから特定のタブにジャンプするにはどうすればよいですか?