Bootstrap: 模态框内的选项卡

Question

我制作了一个模态对话框，现在正在尝试将选项卡插入其中，但是无法使选项卡显示内容。选项卡的部分代码如下：

http://plnkr.co/edit/eGRmkzDvo4lYGCjzA5q7

如何在模态对话框中放置选项卡页面？

- Darold Davis

---

请将HTML（相关的）源代码粘贴在这里，因为plnunk上的标记看起来非常混乱，可能是测试环境弄乱了它。 - Sherbrow

Answer 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>

- sujithayur

Answer 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">

- zachzurn

---

已添加您的建议。仍无法切换窗格：http://plnkr.co/edit/eGRmkzDvo4lYGCjzA5q7 - Darold Davis

你的HTML完全乱了 - 先修复它。你还需要使用data-toggle="tab"，而不是data-toggle="tabs"。 - zachzurn

它是Plunk。我不确定什么是“plink”。我摘下了一部分，只保存了选项卡部分。它是一个更大的应用程序的一部分，所以我的第一个Plunk是试图隐藏它的很多内容：http://plnkr.co/edit/eGRmkzDvo4lYGCjzA5q7无论你做了什么“plink”的更改，我都看不到。尝试在将来分叉并重新保存。无论如何，我接近了；每个页面显示不同的内容，但前面的内容仍然存在。这一定是我没有关闭的<div>？ - Darold Davis

我修好了！http://plnkr.co/edit/nUL9svfqQYRkPqunkcGF 我需要将所有的选项卡面板都包裹在一个.tab-content类中，而不是每个面板都用一个<div class="tab-content">。 - Darold Davis

很高兴听到这个消息。我以前从未使用过plnkr，通常我使用JSFiddle。我想我得学习如何正确地使用它。 - zachzurn

我也使用JSFiddle。我喜欢Plunker，因为你可以Fork。感谢您的见解。 - Darold Davis