2015-10-16 115 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

相关问题