虽然有很多 Twitter Bootstrap 问题与我遇到的问题类似,但我还没有找到任何解决我的特定问题的方法。我正在使用 Twitter Bootstrap “选项卡”功能来显示内容,虽然脚本成功更改了事件选项卡,但内容保持不变。
代码如下:
<!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)。一段时间以来,我一直在负责解决这个问题,因此非常感谢您的帮助。
编辑:Here's包含错误代码的 jsfiddle 链接。
最佳答案
您需要将 Bootstrap 脚本引用移动到您的就绪事件的上方。因此,页面底部应如下所示:
<script src="public/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function ($) {
$('.nav-tabs').tab();
});
</script>
此外,由于您指定了 HTML5 文档类型,因此 script
标记中的 type
属性是可选的。
编辑 2:
我相当确定您可以摆脱手动标签绑定(bind) - 我不在我的网站上使用它,而且这个 jsFiddle 也不这样做:http://jsfiddle.net/C3gQb/
如你所见,你只需要绑定(bind)你的“标签”的点击事件,然后它就可以工作了。这应该有效:
<script src="public/js/bootstrap.min.js"></script>
<script>
$(function(){
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
如果不是,我怀疑您的浏览器/开发环境有一些不寻常的地方,从您发布的内容来看并不明显。
编辑 4
是的,我们已经用您的新 jsFiddle 隔离了问题。我调整了这个版本的前 2 个:http://jsfiddle.net/C3gQb/4/ - 这两个现在可以工作了:
$(function(){
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
});
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<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>
关于javascript - Twitter Bootstrap 选项卡选择不更改内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15262440/