twitter-bootstrap 引导程序 - 可选项卡左侧的选项卡根本不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17386724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap - tabbable with tabs on left not working at all
提问by mage
I am attempting to create tabbable tabs where the tabs are stacked vertically on the left side of the page, and the content on the right side of the page changes with the tabs. Here is my code:
我正在尝试创建可选项卡的选项卡，其中选项卡垂直堆叠在页面左侧，页面右侧的内容随选项卡而变化。这是我的代码：
<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>
What happens is that the tabs show up, but all the content is invisible, and clicking on the tabs changes the active tab but does not change anything on the right side. I attempted to create a jsfiddle but it's even worse there, maybe someone can teach me how to do this correctly: http://jsfiddle.net/ewRZZ/3/
发生的情况是选项卡显示出来，但所有内容都不可见，单击选项卡会更改活动选项卡，但不会更改右侧的任何内容。我试图创建一个 jsfiddle，但那里更糟，也许有人可以教我如何正确地做到这一点：http: //jsfiddle.net/ewRZZ/3/
Finally, I am including the following files in the following order inside the html head: - bootstrap.min.css - bootstrap-responsive.min.css - jquery-1.8.3.min.js - bootstrap.min.js
最后，我在 html 头中按以下顺序包含以下文件： - bootstrap.min.css - bootstrap-responsive.min.css - jquery-1.8.3.min.js - bootstrap.min.js
I also have specified the correct DOCTYPE at the top of the page so I know that is not the issue.
我还在页面顶部指定了正确的 DOCTYPE，所以我知道这不是问题。
I tried copy-pasting the jquery code from the bootstrap website and then changing "#myTab a" to "#foodTab a" etc, but it changed nothing. Maybe I was doing it wrong?
我尝试从引导程序网站复制粘贴 jquery 代码，然后将“#myTab a”更改为“#foodTab a”等，但没有任何改变。也许我做错了？
I actually got tabs to work on other pages on the same site (with the same code that includes the script). The only difference is that those tabs were on the top, not along the side, and thus I did not enclose them in a <div class="tabbable"></div>. Maybe this has something to do with it? Thanks :)
我实际上得到了在同一站点上的其他页面上工作的选项卡（使用包含脚本的相同代码）。唯一的区别是这些标签位于顶部，而不是侧面，因此我没有将它们包含在<div class="tabbable"></div>. 也许这与它有关？谢谢 ：）
回答by PSL
You just need to do a small change to the active one. Just add a class .into it. Because bootstrap select them with .inselector and swaps the other tabs. So the absence of it just doesn't make it visible or switch.
您只需要对活动的进行一些小的更改。只需添加一个类.in即可。因为引导程序使用.in选择器选择它们并交换其他选项卡。因此，缺少它并不会使其可见或切换。
Use:
利用：
<div class="tab-pane fade in active" id="foodTab">Oh my god it's the food tab!</div>
Instead of:
代替：
<div class="tab-pane fade active" id="foodTab">
回答by Rob Kovacs
The one thing you appear to be missing is the JavaScript that activates the tabs' interactivity (see http://twitter.github.io/bootstrap/javascript.html#tabs):
您似乎缺少的一件事是激活选项卡交互性的 JavaScript（请参阅http://twitter.github.io/bootstrap/javascript.html#tabs）：
jQuery(document).ready(function ($) {
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
See http://jsfiddle.net/DYbx5/for a working example.
有关工作示例，请参阅http://jsfiddle.net/DYbx5/。
