我正在尝试通过ajax加载Twitter崩溃的内容，内容是以Twitter引导标签的形式，其中包含html表格，这适用于第一个标签和第一个可折叠菜单，我想知道什么是通过ajax在Twitter引导程序崩溃中加载标签的最佳方法？这是一个小提琴 http://jsfiddle.net/H36fG/
折叠布局的代码 ` 玉米
</div>
<div id="Maize" class="accordion-body collapse">
<div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Maize"
class="btn btn-link">See More</a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" id="2" data-toggle="collapse" data-parent="#accordion"
href="#Sorghum">
Sorghum </a>
</div>
<div id="Sorghum" class="accordion-body collapse">
<div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Sorghum"
class="btn btn-link">See More</a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" id="3" data-toggle="collapse" data-parent="#accordion"
href="#Wheat">
Wheat </a>
</div>
<div id="Wheat" class="accordion-body collapse">
<div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Wheat"
class="btn btn-link">See More</a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" id="4" data-toggle="collapse" data-parent="#accordion"
href="#Rice">
Rice </a>
</div>
<div id="Rice" class="accordion-body collapse">
<div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Rice"
class="btn btn-link">See More</a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" id="5" data-toggle="collapse" data-parent="#accordion"
href="#Millet">
Millet </a>
</div>
<div id="Millet" class="accordion-body collapse">
<div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Millet"
class="btn btn-link">See More</a>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" id="6" data-toggle="collapse" data-parent="#accordion"
href="#Beans">
Beans </a>
</div>
<div id="Beans" class="accordion-body collapse">
<div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Beans"
class="btn btn-link">See More</a>
</div>
</div>
带有标签的加载的html表是：
<ul class="nav nav-tabs" id="product-table">
<li><a href="#1" data-toggle="tab">Grade 1</a>
</li>
<li><a href="#2" data-toggle="tab">Grade 2</a>
</li>
<li><a href="#3" data-toggle="tab">Grade 3</a>
</li>
</ul>
<div class="tab-content">
<div>
<div class="tab-pane" id="1">
<table class="table table-condensed table-bordered table-striped volumes">
<thead>
<tr>
<th>Warehouse</th>
<th>Grain Volume</th>
<th>Trade Volume</th>
<th>Direction</th>
</tr>
</thead>
<tbody>
<tr>
<td>NFRA MPANDA RUKWA</td>
<td>487</td>
<td>487.00</td>
<td>IN</td>
</tr>
<tr>
<td>COTCORI Cooperative</td>
<td>113</td>
<td>113.00</td>
<td>IN</td>
</tr>
<tr>
<td>ENAS GBC KIREHE</td>
<td>131</td>
<td>131.00</td>
<td>IN</td>
</tr>
<tr>
<td>Government Procurement and Supply Agent</td>
<td>453</td>
<td>453.00</td>
<td>IN</td>
</tr>
<tr>
<td>Nairobi(test)</td>
<td>261</td>
<td>250.00</td>
<td>IN</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="tab-pane" id="2">
<table class="table table-condensed table-bordered table-striped volumes">
<thead>
<tr>
<th>Warehouse</th>
<th>Grain Volume</th>
<th>Trade Volume</th>
<th>Direction</th>
</tr>
</thead>
<tbody>
<tr>
<td>National Food Reserve Agency_Manyoni</td>
<td>172</td>
<td>172.00</td>
<td>IN</td>
</tr>
<tr>
<td>Sodea GBC</td>
<td>471</td>
<td>20.00</td>
<td>OUT</td>
</tr>
<tr>
<td>Kivu Maize Factory</td>
<td>389</td>
<td>389.00</td>
<td>IN</td>
</tr>
<tr>
<td>Mombasa Bulk Grain Handlers</td>
<td>200</td>
<td>200.00</td>
<td>IN</td>
</tr>
<tr>
<td>Zwii Enterprises-Muloza</td>
<td>-47</td>
<td>47.00</td>
<td>OUT</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="tab-pane" id="3">
<table class="table table-condensed table-bordered table-striped volumes">
<thead>
<tr>
<th>Warehouse</th>
<th>Grain Volume</th>
<th>Trade Volume</th>
<th>Direction</th>
</tr>
</thead>
<tbody>
<tr>
<td>COTCORI Cooperative</td>
<td>93</td>
<td>93.00</td>
<td>IN</td>
</tr>
<tr>
<td>SOSOMA GBC KICUKIRO</td>
<td>-23</td>
<td>23.00</td>
<td>OUT</td>
</tr>
<tr>
<td>Shabiby_Indivisual</td>
<td>270</td>
<td>270.00</td>
<td>IN</td>
</tr>
<tr>
<td>Silayo_Union Service Stores</td>
<td>-38</td>
<td>38.00</td>
<td>OUT</td>
</tr>
<tr>
<td>SGR/NFRA VWAWA</td>
<td>-39</td>
<td>39.00</td>
<td>OUT</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
我正在使用Twitter Bootstrap 2.2和Jquery 1.8.3，我愿意就如何最好地呈现此类数据提出建议
答案 0 :(得分：0)
我首先要确保只为每个协议加载一次内容，然后使用Ajax回调来应用选项卡设置等。
另外，对于你的标签命名约定（我看到你正在使用<div id="1">），我建议不要使用数字作为ID，因为我已经看到这导致JS / JQ的问题，所以也许去吧＃tabs-one，＃tabs-two等
这是一个简单的例子：
$(document).ready(function() {
$('.accordion-toggle').on('click', function () {
var parentRef = $(this).attr('href'),
$innerContent = $(parentRef).find('.accordion-inner');
//only load group once
if($innerContent.text() ===''){
$innerContent.load('http://fiddle.jshell.net/NPpHm/show/', function(){
var $this = $(this),
$innerTabs = $this.find('.nav-tabs');
console.log($innerTabs);
var tabOpts = {
active: 0,
cookie: {expires: 3},
show: onTabShow,
fillSpace: false,
autoHeight: true,
collapsible: false
};
$innerTabs.tabs(tabOpts).fadeIn(700);
});
}
});
});