虽然有很多Twitter Bootstrap的问题与我遇到的类似,但我还没有找到解决我特定问题的方法。我正在使用Twitter Bootstrap的“tab”功能来显示内容,虽然脚本成功地更改了活动选项卡,但内容仍然保持不变。
以下是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, Tabs!</title>
<link rel="stylesheet" href="public/css/bootstrap.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="public/js/bootstrap.min.js"></script>
</head>
<body>
<h3>Version Information:</h3>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#project/src/Graph/Graph.pm__0" data-toggle="tab">9424</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__1" data-toggle="tab">9058</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__2" data-toggle="tab">8928</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__3" data-toggle="tab">8926</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__4" data-toggle="tab">8924</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__5" data-toggle="tab">8890</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__6" data-toggle="tab">8889</a>
</li>
<li>
<a href="#project/src/Graph/Graph.pm__7" data-toggle="tab">8887</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="project/src/Graph/Graph.pm__0">
<p>
Author: joe<br>
Version: v9424 (1:31 pm February 28, 2013)<br>
Action: Modified<br>
Message: Finalized a bit of the code... should be better now.<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__1">
<p>
Author: joe<br>
Version: v9058 (9:13 pm February 26, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__2">
<p>
Author: joe<br>
Version: v8928 (2:08 am February 25, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__3">
<p>
Author: joe<br>
Version: v8926 (1:14 am February 25, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__4">
<p>
Author: joe<br>
Version: v8924 (10:26 pm February 24, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__5">
<p>
Author: joe<br>
Version: v8890 (9:59 pm February 23, 2013)<br>
Action: Modified<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__6">
<p>
Author: joe<br>
Version: v8889 (9:53 pm February 23, 2013)<br>
Action: Added<br>
Message: Hello, world!<br>
</p>
</div>
<div class="tab-pane" id="project/src/Graph/Graph.pm__7">
<p>
Author: joe<br>
Version: v8887 (9:40 pm February 23, 2013)<br>
Action: Added<br>
Message: Hello, world!<br>
</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.nav-tabs').tab();
});
</script>
</body>
</html>
当我运行这个程序时,所有依赖的文件都被正确加载(供参考,使用的bootstrap版本是2.3.1)。我已经为这个问题头痛了相当长的时间,任何帮助都将不胜感激。
编辑:这里是一个包含错误代码的jsfiddle链接:http://jsfiddle.net/C3gQb/2/。