Jquery 引导-左侧有选项卡的选项卡完全不工作

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

<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>

哦，天哪，这是食品账单！
玩具标签！
服装标签
书

出现的情况是，选项卡显示，但所有内容都不可见，单击选项卡会更改活动选项卡，但不会更改右侧的任何内容。 我试图创建一个JSFIDLE，但更糟糕的是，也许有人可以教我如何正确地做到这一点：

最后，我在html头中按以下顺序包括以下文件： -bootstrap.min.css -bootstrap-responsive.min.css -jquery-1.8.3.min.js -bootstrap.min.js

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

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

---

实际上，我在同一站点的其他页面上使用了选项卡（使用包含脚本的相同代码）。唯一的区别是这些标签位于顶部，而不是沿着侧面，因此我没有将它们括在

中。也许这与此有关？谢谢：）

您只需要对活动的文件做一个小的更改。只需在中添加一个类。因为引导程序使用选择器中的

。选择它们并交换其他选项卡。因此，缺少它并不能使它可见或切换

使用：

哦，天哪，这是食品账单！

而不是：

<div class="tab-pane fade active" id="foodTab">



您似乎缺少的一件事是激活选项卡交互的JavaScript（请参阅）：

请参阅一个工作示例。
让BS选项卡工作不一定需要JS，所有这些都在框架中完成。但它也可以使用。但是你的第一篇文章是+1，这是一个很好的开始。谢谢，这个问题解决了。特别感谢您解释为什么它有效，而不仅仅是提出解决方案。回答得好！
<div class="tab-pane fade active" id="foodTab">

jQuery(document).ready(function ($) {
    $('.nav-tabs a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    });
});