テーブル付きテーブルとテーブルリスト

Question

Tablesorter 2.0を使用していて、複数のテーブルがあります。私はそれらをタブで飾って欲しい。私のポイントを理解するために、dataTablesにも同様のオプションがあります（http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html）。

Initalizationコード：

$(function() { 
    $("table") 
     .tablesorter({widthFixed: true, widgets: ['zebra']}) 
     .tablesorterPager({container: $("#pager")}); 

}); 

私のテーブルの例1：

<div class="table"> 
<table cellspacing="1" class="tablesorter"> 
<thead> 
    <tr> 
     <th>Name</th> 
     <th>Carbohydrates (g)</th> 
     <th>Proteins (g)</th> 
     <th>Fats (g)</th> 
     <th>Kcal</th> 
     <th>IG</th> 
    </tr> 
</thead> 
<tbody>  
    <tr> 
     <td>Potatos</td> 
     <td>18.3</td> 
     <td>1.9</td> 
     <td>0.1</td> 
     <td>82 kcal</td> 
     <td>90</td> 
    </tr>    
</tbody> 
</table> 
</div> 

私は私のような何かにそれを置くために持っていることを知っている：そのための

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Bakery</li> 
    <li><a href="#tabs-2">Fruits</li> 
    <li><a href="#tabs-3">Vegetables</li> 
</ul> 
<div id="tabs-1">   
</div>   
<div id="tabs-2">    
</div> 
<div id="tabs-3">   
</div> 
</div> 

私JavaScriptの小さな知識私はあなたに私に言いたい、またはそれを行う方法のヒントを私にお願いしています。

Answer 1

私は、タブリストに閉じる</a>がないことが問題だと思います。このフォーマット（）を試してみてください。

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Bakery</a></li> 
     <li><a href="#tabs-2">Fruits</a></li> 
     <li><a href="#tabs-3">Vegetables</a></li> 
    </ul> 

    <div id="tabs-1"> 
     <table class="tablesorter"> 
      ... 
     </table> 
    </div> 

    <div id="tabs-2"> 
     <table class="tablesorter"> 
      ... 
     </table> 
    </div> 

    <div id="tabs-3"> 
     <table class="tablesorter"> 
      ... 
     </table> 
    </div> 

</div> 

javascriptの

$('#tabs').tabs(); 
$('.tablesorter').tablesorter();