【发布时间】：2012-03-26 16:47:22
【问题描述】：
我正在尝试在以下代码中实现 Twitter Bootstrap 选项卡，但它似乎不起作用。选项卡会显示出来，但是当我单击它们时，什么也没有发生。以下是我正在使用的唯一代码。所有其他 CSS/JS 脚本都是从 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-toggle也对我有用； Bootstrap 3 也是如此。这是一个带有工作示例的引导程序：bootply.com/74927