Bootstrap3のタブを使って目次のリンク、目次のリンククリックで内容表示の切り替えを行うサンプルを作成しています。
なお、ここではBootstrapのv3.3.7を使用して動作確認しています。
[/notp]
１）タイトル１
コンテンツ１
：
：
：
：
：
：
２）タイトル２
コンテンツ２
：
：
：
：
：
：
３）タイトル３
コンテンツ３
：
：
：
：
：
：
<ul class="list-unstyled">
<li><a href="#cnt1" style="cursor: pointer;">１）タイトル１</a></li>
<li><a href="#cnt2" style="cursor: pointer;">２）タイトル２</a></li>
<li><a href="#cnt3" style="cursor: pointer;">３）タイトル３</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane panel active panel-default" id="cnt1">
<div class="panel-heading">１）タイトル１</div>
<div class="panel-body" >
コンテンツ１<br />
：<br />
：<br />
：<br />
</div>
</div>
<div class="tab-pane panel panel-default" id="cnt2">
<div class="panel-heading">２）タイトル２</div>
<div class="panel-body" >
コンテンツ２<br />
：<br />
：<br />
：<br />
</div>
</div>
<div class="tab-pane panel panel-default" id="cnt3">
<div class="panel-heading">３）タイトル３</div>
<div class="panel-body" >
コンテンツ３<br />
：<br />
：<br />
：<br />
</div>
</div>
</div>