如何在单击特定选项卡时显示引导卡主体数据

Question

在我的角度应用程序中，我放置了带有标题和数据的引导卡，以水平方式显示数据(使用的水平卡(。

component.html

<div class="bs-example">
<div class="card" id="dd" style="max-width: 800px;">
<div class="row no-gutters">
<div class="col-sm-3" >
<h5>heading 1</h5>
<div class="card-body">
<p>info 1.1</p>                         
<p>info 1.2</p>                         
</div>
</div>
<div class="col-sm-3" >
<h5>heading 2</h5>
<div class="card-body">
<p>info 2.1</p>
<p>info 2.2</p>
</div>
</div>
<div class="col-sm-3" >
<h5>heading 3</h5>
<div class="card-body">
<p>info 3.1</p>
<p>info 2.2</p>
</div>
</div>

</div>
</div>
</div>

现在我想让标题标题-1，2，3…作为选项卡。当我们点击特定选项卡时，数据(即信息(将像信息1.1、信息1.2、信息1.3等一样出现(必须如上水平出现(。如果标题是另一个数据信息，它必须像信息1.11一样出现另一张卡(在上面的卡之后(，info1.12等等。其他标题也一样(有人能帮我吗？我是这个引导程序的新手

我想在单击每个选项卡的情况下显示水平车厢中的数据。如果标题中有两个信息数据，则再显示一个信息。

Answer 1

您可以为选项卡使用引导程序类。

<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">heading 1</a>
</li>
<li class="nav-item">
<a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">heading 2</a>
</li>
<li class="nav-item">
<a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">heading 3</a>
</li>
</ul>

<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div class="card-header" role="tab" id="heading-A">
<h5 class="mb-0">
<!-- Note: `data-parent` removed from here -->
<a data-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<!-- Note: New place of `data-parent` -->
<div id="collapse-A" class="collapse show" data-parent="#content" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
<p>info 1.1</p>                         
<p>info 1.2</p>
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div class="card-header" role="tab" id="heading-B">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" data-parent="#content" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
<p>info 2.1</p>
<p>info 2.2</p>
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div class="card-header" role="tab" id="heading-C">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-C" aria-expanded="false" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" data-parent="#content" aria-labelledby="heading-C">
<div class="card-body">
<p>info 3.1</p>
<p>info 2.2</p>
</div>
</div>
</div>
</div>

示例