Bootstrap：模态框内的选项卡答案

【问题标题】：Bootstrap: Tabs inside a modalBootstrap：模态框内的选项卡
【发布时间】：2013-02-07 22:07:36
【问题描述】：

我创建了一个模式对话框，现在正尝试在其中插入标签，但无法让标签显示内容。标签部分代码：

http://plnkr.co/edit/eGRmkzDvo4lYGCjzA5q7

如何将标签页放置在模态框内？

【问题讨论】：

请在此处跳过 HTML（相关）源代码，因为 plnunk 上的标记看起来一团糟，可能是测试环境搞砸了。

标签： twitter-bootstrap tabs modal-dialog

【解决方案1】：

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>

【讨论】：

【解决方案2】：

您缺少 data-toggle 属性：

<li><a href="#details" data-toggle="tab">Details</a></li>

以及您想首先显示的任何选项卡的活动状态：

<li class="active"><a href="#details" data-toggle="tab">Details</a></li>
<div class="tab-pane active" id="details">

【讨论】：

添加了您的建议。仍然无法切换窗格：plnkr.co/edit/eGRmkzDvo4lYGCjzA5q7
您的 HTML 完全搞砸了——先修复它。您还需要使用 data-toggle="tab" 而不是 data-toggle="tabs"。
它的笨拙。我不确定“plink”是什么。我撕掉了一大块，只是保存了标签部分。它是一个更大的应用程序的一部分，所以我的第一个 plunk 是试图掩盖它：plnkr.co/edit/eGRmkzDvo4lYGCjzA5q7 你所做的“plink”有什么变化，我看不到。尝试分叉它并在将来重新保存。无论如何，我已经接近了；每个页面显示不同的内容，但之前的内容仍然存在。它一定是一个
我没有关闭？
我修好了！ plnkr.co/edit/nUL9svfqQYRkPqunkcGF 我需要将所有选项卡窗格包装在一个 .tab-content 类中，而不是每个窗格一个
。
很高兴听到。我以前从未使用过 plnkr，我通常使用 JSFiddle。我想我必须学习如何正确使用它。