bootstrap - tabbable 左侧的选项卡根本不起作用

Question

我正在尝试创建可选项卡，其中选项卡垂直堆叠在页面左侧，页面右侧的内容随选项卡而变化。这是我的代码：

<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 - 引导响应.min.css - jquery-1.8.3.min.js - bootstrap.min.js

我还在页面顶部指定了正确的 DOCTYPE，所以我知道这不是问题所在。

我尝试从引导网站复制粘贴 jquery 代码，然后将“#myTab a”更改为“#foodTab a”等，但没有任何改变。也许我做错了？

实际上，我在同一站点上的其他页面上使用了选项卡（使用包含脚本的相同代码）。唯一的区别是这些选项卡在顶部，而不是在侧面，因此我没有将它们包含在<div class="tabbable"></div> 中。也许这与它有关？谢谢:)

Answer 1

您只需要对活动的进行一些小改动。只需添加一个类.in 即可。因为引导程序使用 .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

Answer 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/。