外部ページからTwitter Bootstrapのタブにリンクする
Twitter Bootstrapを使用したTabsの特定のタブを外部ページからリンク参照する方法。
参考サイト
→ javascript - Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload? - Stack Overflow
使用例
次は当ブログで実際に使用しているコードです。Twitter Bootstrap v3.1.1を使用しています。
スクリプト (app.js)
$( document ).ready(function() {
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tabref-";
if (hash) {
$('.nav-tabs-vertical a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs-vertical a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
});
タブがあるページ (categories.html)
<div class="col-sm-3 col-xs-5">
<ul class="nav nav-tabs-vertical">
<li><a href="#software" data-toggle="tab">Software 1</a></li>
<li><a href="#diary" data-toggle="tab">Diary 1</a></li>
<li><a href="#pc" data-toggle="tab">Pc 1</a></li>
</ul>
</div>
<div class="col-sm-9 col-xs-7">
<div class="tab-pane" id="software">
<h2>Posts in Software</h2>
<ul>
<li><a href="/e/transfer-gooblog-to-jekyll-w-mt6.html">gooブログのデータをMovableTypeに移行</a>- 03/10/2014</li>
</ul>
</div>
<div class="tab-pane" id="diary">
<h2>Posts in Diary</h2>
<ul>
<li><a href="/e/140311-enter-nifty-wimax.html">140311 @niftyにてWiMAXを契約</a>- 03/11/2014</li>
</ul>
</div>
<div class="tab-pane" id="pc">
<h2>Posts in Pc</h2>
<ul>
<li><a href="/e/wimax-with-high-latency.html">WiMAXはパケット伝送に時間が掛かる</a>- 03/12/2014</li>
</ul>
</div>
</div>
<script type="text/javascript" src="/assets/js/app.js"></script>他のページ
<li><a href="/categories.html#tabref-software">Software 1</a></li>
<li><a href="/categories.html#tabref-diary">Diary 1</a></li>
<li><a href="/categories.html#tabref-pc">Pc 1</a></li>ページ移動・更新時のスクロールを防止するためのテクニックとして、ページアドレスのハッシュ部にtab_(上の例ではtabref-)というダミーの文字列を加えているようです。js/html内のnav-tabs-verticalは適宜nav-tabs等に変更して下さい。
私はWeb制作は趣味でやっている程度なので所詮素人です。もっとスマートな方法があれば教えてもらえると嬉しいです。