嵌套的Bootstrap选项卡未正确加载内容

时间:2015-04-05 22:53:43

标签: javascript jquery html css twitter-bootstrap

我正在开发一个Bootstrap项目,我已经加载了一些嵌套的标签。

我有一个设计器标签,每个标签下的代码标签都有更多标签。

问题是当我将标签 designer 更改为代码时,反之亦然,嵌套标签默认情况下不会加载内容,必须选中。

仅在更改父选项卡时加载页面时才会发生这种情况。

演示可用here,对不起的描述很难解释我的意思,如果你观看演示会更容易理解。

注意:演示中的大多数CSS和JS都是Prism.js扩展我不认为这会导致问题(因为它没有发生)但是我只是包含了代码柜面。

参考:

<div class="container">
   <div class="row">
        <div class="col-sm-12">
            <div class="" role="tabpanel" data-example-id="togglable-tabs">
                <ul id="main-tabs" class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#des" id="des-tab" role="tab" data-toggle="tab" aria-controls="des" aria-expanded="true">Designer</a></li>
                    <li role="presentation"><a href="#code" role="tab" id="code-tab" data-toggle="tab" aria-controls="code">Code</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="des" aria-labelledby="des-tab">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
                                    <ul id="myTab" class="nav nav-tabs" role="tablist">
                                        <li role="presentation" class="active dropdown">
                                            <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">Look <span class="caret"></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
                                                <li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">Text</a></li>
                                                <li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Color</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <div id="myTabContent" class="tab-content">
                                        <div role="tabpanel" class="tab-pane fade in active" id="dropdown1" aria-labelledby="dropdown1-tab">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">Text</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            Font-Family
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-default">Action</button>
                                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                                                    <span class="caret"></span>
                                                                    <span class="sr-only">Toggle Dropdown</span>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li><a href="#">Lato</a></li>
                                                                    <li><a href="#">Serif</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            Font-Size
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="input-group">
                                                                <input type="text" class="form-control" aria-label="...">
                                                                <div class="input-group-btn">
                                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
                                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                                        <li><a href="#">px</a></li>
                                                                        <li><a href="#">em</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
                                            <p>Test</p>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <div class="col-sm-6">
                                <div class="browser-mockup">
                                    <img src="http://placehold.it/500x300/fff/eee" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="code" aria-labelledby="code-tab">
                        <div class="row">
                            <div class="col-sm-6">
                                <pre><code class="language-markup">&lt;p>Hello World&lt;/p></code></pre>
                            </div>
                            <div class="col-sm-6">
                                <div class="" role="tabpanel" data-example-id="togglable-tabs">
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li role="presentation" class="active"><a href="#sass" id="sass-tab" role="tab" data-toggle="tab" aria-controls="sass" aria-expanded="true">SASS</a></li>
                                        <li role="presentation"><a href="#less" role="tab" id="less-tab" data-toggle="tab" aria-controls="less">LESS</a></li>
                                        <li role="presentation"><a href="#css" role="tab" id="css-tab" data-toggle="tab" aria-controls="css">CSS</a></li>
                                    </ul>
                                    <div id="myTabContent" class="tab-content">
                                        <div role="tabpanel" class="tab-pane fade in active" id="sass" aria-labelledby="sass-tab">
                                            <pre><code class="language-scss">p {color:red}</code></pre>
                                        </div>
                                        <div role="tabpanel" class="tab-pane fade" id="less" aria-labelledby="less-tab">
                                            <pre><code class="language-less">p {color:red}</code></pre>
                                        </div>
                                        <div role="tabpanel" class="tab-pane fade" id="css" aria-labelledby="css-tab">
                                            <pre><code class="language-css">p {color:red}</code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

这是因为您使用myTabContent id。

有多个div

您可以删除这些ID或使其唯一。

<强> Here is an Updated Example