Próbuję zaimplementować zakładki Twitter Bootstrap w poniższym kodzie, ale wygląda na to, że nie działa. Zakładki są wyświetlane, ale kiedy je klikam, nic się nie dzieje. Poniżej znajduje się jedyny kod, którego używam. Wszystkie inne skrypty CSS / JS są kopiowane z frameworka Twitter Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="container">
<!-------->
<div id="content">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active"><a href="#red">Red</a></li>
<li><a href="#orange">Orange</a></li>
<li><a href="#yellow">Yellow</a></li>
<li><a href="#green">Green</a></li>
<li><a href="#blue">Blue</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".tabs").tabs();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>
data-togglezadziałało; dotyczy to również Bootstrap 3. Oto bootply z działającym przykładem: bootply.com/74927