我正在尝试创建可列表标签,其中标签垂直堆叠在页面左侧,页面右侧的内容随标签一起变化。这是我的代码:
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#foodTab" data-toggle="tab">
Food</a></li>
<li class="">
<a href="#toyTab" data-toggle="tab">
Toy</a></li>
<li class="">
<a href="#clothesTab" data-toggle="tab">
Clothes</a></li>
<li class="">
<a href="#booksTab" data-toggle="tab">
Book</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active" id="foodTab">
Oh my god it's the food tab!
</div>
<div class="tab-pane fade" id="toyTab">
Toy tab!
</div>
<div class="tab-pane fade" id="clothesTab">
clothing tab
</div>
<div class="tab-pane fade" id="booksTab">
books books books
</div>
</div>
</div>
选项卡会显示,但所有内容都不可见,单击选项卡会更改活动选项卡,但不会更改右侧的任何内容。 我试图创建一个jsfiddle,但它更糟糕,也许有人可以教我如何正确地做到这一点:http://jsfiddle.net/ewRZZ/3/
最后,我在html头部中按以下顺序包含以下文件: - bootstrap.min.css - bootstrap-responsive.min.css - jquery-1.8.3.min.js - bootstrap.min.js
我也在页面顶部指定了正确的DOCTYPE,所以我知道这不是问题。
我尝试从引导程序网站复制粘贴jquery代码,然后将“#myTab a”更改为“#foodTab a”等,但它没有改变任何内容。也许我做错了?
我实际上有标签可以在同一站点的其他页面上工作(使用包含脚本的相同代码)。唯一的区别是那些标签位于顶部,而不是侧面,因此我没有将它们括在<div class="tabbable"></div>
中。也许这与它有关?谢谢:)
答案 0 :(得分:5)
您只需要对活动的一个进行小的更改。只需为其添加一个类.in
即可。因为bootstrap使用.in
选择器选择它们并交换其他选项卡。因此,缺少它只是不会使其可见或切换。
使用:
<div class="tab-pane fade in active" id="foodTab">Oh my god it's the food tab!</div>
而不是:
<div class="tab-pane fade active" id="foodTab">
<强> Demo 强>
答案 1 :(得分:2)
您似乎缺少的一件事是激活标签交互性的JavaScript(参见http://twitter.github.io/bootstrap/javascript.html#tabs):
jQuery(document).ready(function ($) {
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
有关工作示例,请参阅http://jsfiddle.net/DYbx5/。