Bootstrap 3 个选项卡数据仅显示在第一个选项卡上

Question

我正在使用 Bootstrap 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

Answer 1

更改您的 Class 姓名

第一个标签内容

tab-pane fade in active

第二个标签内容

tab-pane fade

演示 link http://jsfiddle.net/s9s5m3n3/2/

Answer 2

一切都很好

将 #1270013 和 #1270015

的内部内容选项卡 .tab-panel 的 class 名称更改为 .tab-pane

参见fiddle：http://jsfiddle.net/sachinkk/s9s5m3n3/3/

Bootstrap 3 个选项卡数据仅显示在第一个选项卡上

Bootstrap 3 Tabs Data only showing on first tab

html

javascript

jquery

tabs

twitter-bootstrap