我正在开发一个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"><p>Hello World</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>