twitter-bootstrap Bootstrap：模态内的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14761942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Tabs inside a modal
提问by Darold Davis
I made a moda dialogl and now am trying to insert tabs into it, but having trouble getting the tabs to display content. Partial code of the tabs:
我制作了一个 moda dialogl，现在正在尝试将选项卡插入其中，但无法让选项卡显示内容。标签的部分代码：
http://plnkr.co/edit/eGRmkzDvo4lYGCjzA5q7
http://plnkr.co/edit/eGRmkzDvo4lYGCjzA5q7
How do I place tab pages inside a modal?
如何在模态中放置标签页？
回答by sujithayur
http://plnkr.co/edit/Oj681B1YbLU1dJEiWHZp?p=preview
http://plnkr.co/edit/Oj681B1YbLU1dJEiWHZp?p=preview
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 ng-hide="newUser">Heading</h3>
</div>
<ul class="nav nav-tabs" id="tabContent">
<li class="active"><a href="#details" data-toggle="tab">Details</a></li>
<li><a href="#access-security" data-toggle="tab">Access / Security</a></li>
<li><a href="#networking" data-toggle="tab">Networking</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="details">
Details tab
<div class="control-group">
<label class="control-label">Instance Name</label>
</div>
</div>
<div class="tab-pane" id="access-security">
content 0
</div>
<div class="tab-pane" id="networking">
content 1
</div>
</div>
回答by zachzurn
You are missing the data-toggle attribute:
您缺少数据切换属性：
<li><a href="#details" data-toggle="tab">Details</a></li>
And the active state for whatever tab you want to show up first:
以及您要首先显示的任何选项卡的活动状态：
<li class="active"><a href="#details" data-toggle="tab">Details</a></li>
<div class="tab-pane active" id="details">
