2015-10-16 114 views
1

我在選項卡內使用引導程序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

+0

添加代碼的jsfiddle –

+1

@LaljiTadhani更新我的問題有一個完整的工作例如 – KhorneHoly

回答

3

改變你的類名

1標籤內容

tab-pane fade in active 

第二個選項卡的內容

tab-pane fade 

演示鏈接http://jsfiddle.net/s9s5m3n3/2/

+0

天哪,我一直在閱讀「tab-paneL」,謝謝! – KhorneHoly

相關問題