时间戳

首页 > 解决方案 > 当我们单击特定选项卡时如何显示引导卡主体数据

css - 当我们单击特定选项卡时如何显示引导卡主体数据

问题描述

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

组件.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 .. 作为选项卡。当我们单击该特定选项卡时，数据（即信息）将像 info 1.1、info 1.2、info 1.3 等一样出现（必须出现水平如上）如果标题是另一个数据信息，它必须来自另一张卡片（在上面的卡片之后），如信息 1.11、信息 1.12 等。其他标题也一样）任何人都可以帮我解决这个问题我是新手这个引导程序。

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

标签： cssangulartwitter-bootstrapbootstrap-4

解决方案

您可以对选项卡使用引导类。

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

例子

推荐阅读