bootstrap动态药丸，显示表结果

Question

我有自助药片，里面有数据表。理想情况下，我想要的是用户点击药丸标签，并在下面显示表格。单击另一个选项卡，然后替换第一个选项卡的表，并在同一个位置显示一个新表。

<!-- Code for bootstrap pill -->
 <ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#item1">Item 1</a></li>
<li><a data-toggle="pill" href="#item2">Item 2</a></li>
<li><a data-toggle="pill" href="#item3">Item 3</a></li>
</ul>

<div class="tab-content">
<div id="item1" class="tab-pane fade in active">
  <span></span>
</div>
<div id="item2" class="tab-pane fade">

</div>
<div id="item3" class="tab-pane fade">

</div>
</div>

<!--Table -->
   <div class="tab-content">
   <table class="table table-condensed" id="table">
   <thead>
   <!--Thead Content is already here-->
   </thead>
   <tbody>
   <!--Tbody content is already here-->
   </tbody>
   </table>
   </div>

<!--Javascript to display correct data according to which pill is selected-->
$(document).ready(function()
{
$("#item1").click(function()


{
    var $item1 = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "0"
}).show();
});

目前，整个表格显示在屏幕上，单击不同的药丸不会改变表格。