Javascript 引导选项卡正在工作，但数据未显示？

我目前正在使用bootstrap，我想添加一个twitter bootstrap选项卡，我已经添加了jQuery和bootstrap-tabs.js

我添加了以下脚本：

<script>
  $('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  });
</script>

$（“#myTab a”）。单击（函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
});

我使用以下代码添加选项卡：

<div class="span12" id="stafftabs" style="margin-bottom: 20px;display:none;">
 <ul id="myTab" class="nav nav-tabs">
  <li class="active">
   <a href="#home" data-toggle="tab">Home</a>
  </li>
  <li>
   <a href="#profile" data-toggle="tab">Profile</a>
  </li>
  <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
   <ul class="dropdown-menu">
    <li>
     <a href="#dropdown1" data-toggle="tab">@fat</a>
    </li>
    <li>
     <a href="#dropdown2" data-toggle="tab">@mdo</a>
    </li>
   </ul>
  </li>
 </ul>
 <div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="home">
   <p>Raw</p>
  </div>
  <div class="tab-pane fade" id="profile">
   <p>Food</p>
  </div>
  <div class="tab-pane fade" id="dropdown1">
   <p>Etsy</p>
  </div>
  <div class="tab-pane fade" id="dropdown2">
   <p>Trust</p>
  </div>
 </div>
</div>
</div>

生的

食物

埃西

信任

我正在使选项卡正常工作，但选项卡中没有显示任何数据

请帮我解决这个问题

这里有一个不使用JS的工作模式。易于编纂，更简单、更快

---

您只需要使用

class=“tabbable”

您的标记中有一个额外的结束div，是不是因为

display:none在您的父div中？如果没有，您可以使用JSFIDLE重新创建吗？嘿，当我在JSFIDLE中看到它时，一切都很好，但我使用的是Supr引导主题，可能存在一些冲突，我无法解决：(