[英]Bootstrap 3 Tabs Data only showing on first tab
I'm using the Bootstrap 3 tabs and accordion within the tabs. 我正在使用Bootstrap 3标签和这些标签中的手风琴。
The html I currently have is the following: 我目前拥有的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>
Now this code displays the 2 tabs above, but the data from the second tab will be shown beneath the first tab data. 现在,这段代码显示了上面的2个标签,但是第二个标签中的数据将显示在第一个标签数据下方。
I can't find the mistake I made why the second tab data won't show in the second tab instead in the first one. 我找不到我犯的错误,为什么第二个标签数据不会显示在第二个标签中,而是显示在第一个标签中。
I'm using jQuery 1.9.1 and the current Bootstrap 3 version. 我正在使用jQuery 1.9.1和当前的Bootstrap 3版本。
Also I don't have any own written JavaScript, I worked with the data tags within the HTML. 另外,我没有自己编写的JavaScript,我使用HTML中的数据标签。
Change Your Class name 更改班级名称
1st tab Content 第一个标签内容
tab-pane fade in active
2nd tab Content 第二个标签内容
tab-pane fade
Demo link http://jsfiddle.net/s9s5m3n3/2/ 演示链接http://jsfiddle.net/s9s5m3n3/2/
Everything is fine 一切顺利
change the class name of inside content tab .tab-panel
to .tab-pane
for both #1270013
and #1270015
将
#1270013
和#1270015
的内部内容选项卡.tab-panel
的类名称更改为.tab-pane
See fiddle: http://jsfiddle.net/sachinkk/s9s5m3n3/3/ 请参阅小提琴: http : //jsfiddle.net/sachinkk/s9s5m3n3/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.