我在選項卡內使用引導程序3選項卡和手風琴。引導程序3選項卡僅在第一個選項卡上顯示的數據
在HTML我現在有如下:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#1270013" aria-controls="#1270013" role="tab" data-toggle="tab">DF</a></li>
<li role="presentation"><a href="#1270015" aria-controls="#1270015" role="tab" data-toggle="tab">HWR</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-panel active" id="1270013">
<div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading30">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse30" aria-expanded="true" aria-control="collapse30">2015-10-14 13:36:34</a></h4>
</div>
<div id="collapse30" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading30">
<div class="panel-body">
...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading31">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse31" aria-expanded="true" aria-control="collapse31">2015-10-14 11:46:26</a></h4>
</div>
<div id="collapse31" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading31">
<div class="panel-body">
...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading31">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse31" aria-expanded="true" aria-control="collapse31">2015-10-14 11:46:26</a></h4>
</div>
<div id="collapse31" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading31">
<div class="panel-body">
...
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading32">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapse32" aria-expanded="true" aria-control="collapse32">2015-10-14 09:56:14</a></h4>
</div>
<div id="collapse32" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading32">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-panel" id="1270015">
<div class="panel-group" id="accordion5" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading50">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion5" href="#collapse50" aria-expanded="true" aria-control="collapse50">2015-10-14 14:08:31</a></h4>
</div>
<div id="collapse50" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading50">
<div class="panel-body">
...
</div>
</div>
</div>
</div>
</div>
</div>
現在,這個代碼將顯示上述2個標籤,但是從第二標籤中的數據將被顯示的第一個選項卡的數據之下。
我找不到我犯的錯誤,爲什麼第二個選項卡數據不會顯示在第二個選項卡中,而不是第一個選項卡中。
我正在使用jQuery 1.9.1和當前的Bootstrap 3版本。
另外我沒有自己寫的JavaScript,我用HTML中的數據標籤工作。
添加代碼的jsfiddle –
@LaljiTadhani更新我的問題有一個完整的工作例如 – KhorneHoly