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制作は趣味でやっている程度なので所詮素人です。もっとスマートな方法があれば教えてもらえると嬉しいです。


comments powered by Disqus

※コメント欄が表示されない場合はdisqusについてJavascriptが有効であることを確認して下さい.

(C) 2008-2017 akm. This blog theme is based on sakmug. Hosted by Xdomain