Menú Boostrap 
Tengo una caja creada con un menú de boostrap con diferentes opciones, el tema es que si pincho en A me aparece el texto, si pincho en B me aparece el texto bien pero ya no me deja volver a pinchar en A
Lo que tengo creado es el Togglable tabs que he sacado de:
http://getbootstrap.com/javascript/#two
Mi código es este:
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-body performanceShow">
<h3 class="panel-title inline">PERFORMANCE</h3>
<div class="visible-sm-inline"></div>
<div class="glyphicon glyphicon-option-vertical pull-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-hidden="true">
</div>
<!-- Nav tabs -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="active"><a href="#YTP" aria-controls="YTP" role="tab" data-toggle="tab">YTP</a></li>
<li class="divider"></li>
<li><a href="#Annual" aria-controls="Annual" role="tab" data-toggle="tab">Annual</a></li>
<li class="divider"></li>
<li><a href="#Quarterly" aria-controls="Quarterly" role="tab" data-toggle="tab">Quarterly</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="YTP">
<p>Year To Day (YTD)</p>
<p class="dato"> <i class="glyphicon glyphicon-triangle-top"></i>
<span class="timer" data-from="0" data-to="24.05" data-speed="3000" data-decimals='2'></span> %</p>
</div>
<div class="tab-pane fade" id="Annual">bbbbbbbbbbb.</div>
<div class="tab-pane fade" id="Quarterly">ccccccccccccccc.</div>
</div>
</div>
No se que hacer para que funcione, supongo que tendré que crear un archivo Javascrips pero no se como llamarlo ni como hacer la llamada para que me funcione.
Los archivos los tengo subidos a:
http://getbootstrap.com/javascript/#two
El apartado que me interesa es el de Performance.
Gracias de antemano
