嵌套的Bootstrap选项卡无法正确加载内容
[英]Nested Bootstrap tabs not loading content correctly
问题描述
I am working on a Bootstrap project and I have loaded some nested tabs. 
我正在进行Bootstrap项目，并且已经加载了一些嵌套选项卡。
I have a designer tab and a code tab under each tab are more tabs. 我有一个设计器选项卡，每个选项卡下的一个代码选项卡是更多选项卡。
The problem is when I change tabs designer to code and vice versa the nested tabs do not load up there content by default and must be selected. 问题是，当我将选项卡设计器更改为代码时 ，反之亦然，嵌套的选项卡默认情况下不会在其中加载内容，必须选择它们。
This does not happen when the page loads only when the parent tabs are changed. 仅在更改父选项卡时才加载页面时，不会发生这种情况。
Demo available here , sorry description is pretty weak difficult to explain what I mean far easier to understand if you view the demo. 此处提供了演示，抱歉的描述非常薄弱，如果您观看演示，很难解释我的意思。
NOTE: Most of the CSS and JS in the demo is the Prism.js extension I do not think this is causing the problem (as it happens without) but I included the code just incase. 注意：演示中的大多数CSS和JS是Prism.js扩展名，我认为这不是造成问题的原因（因为它没有发生），但是我只是以防万一。
Reference: 参考：
<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>
1 个解决方案
解决方案1
1 已采纳 2015-04-05 23:09:40
This happens because you have multiple divs using the myTabContent id. 发生这种情况是因为您有多个使用myTabContent id的div。
You can either remove those id's or make them unique. 您可以删除这些ID或使其唯一。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.