选项卡中的 cshtml、css、引导选项卡

Question

我有两个标签；一个标记为男孩，另一个标记为女孩。

在这两个选项卡中，我都有一个年龄的下拉选项。

我想做什么：

• 在test-b或test-g下显示年龄组。取决于我所在的标签。
• 示例：如果我选择 17-18，我希望在 test-b 下显示 17-18；如果我在男孩标签内

到目前为止我尝试了什么：

• 基本上只是移动包含将在页面上不同区域显示的内容的选项卡 div。它适用于以前的项目。但该项目不是另一个选项卡中的选项卡，不确定这是否是它无法正常工作的原因。

使用引导程序 4.6

    <div class="row">
    <div class="col-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-boy" role="tab" aria-controls="v-pills-boy" aria-selected="true">Boys</a>
            <a class="nav-link" id="v-pills-girl-tab" data-toggle="pill" href="#v-pills-girl" role="tab" aria-controls="v-pills-girl" aria-selected="false">Girls</a>
        </div>
    </div>

    <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">

            <div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#7-8" role="tab" aria-controls="7-8" aria-selected="true">7-8</a>
                            <a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#9-10" role="tab" aria-controls="9-10" aria-selected="false">9-10</a>
                            <a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#11-12" role="tab" aria-controls="11-12" aria-selected="false">11-12</a>
                            <a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#13-14" role="tab" aria-controls="13-14" aria-selected="false">13-14</a>
                            <a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#15-16" role="tab" aria-controls="15-16" aria-selected="false">15-16</a>
                            <a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#17-18" role="tab" aria-controls="17-18" aria-selected="false">17-18</a>
                        </div>                        
                    </div>
                </nav>
                test b
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade" id="7-8" role="tabpanel" aria-labelledby="7-8-tab">7-8</div>
                    <div class="tab-pane fade" id="9-10" role="tabpanel" aria-labelledby="9-10-tab">9-10</div>
                    <div class="tab-pane fade" id="11-12" role="tabpanel" aria-labelledby="11-12-tab">11-12</div>
                    <div class="tab-pane fade" id="13-14" role="tabpanel" aria-labelledby="13-14-tab">13-14</div>
                    <div class="tab-pane fade" id="15-16" role="tabpanel" aria-labelledby="15-16-tab">15-16</div>
                    <div class="tab-pane fade" id="17-18" role="tabpanel" aria-labelledby="17-18-tab">17-18</div>
                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-girl" role="tabpanel" aria-labelledby="v-pills-girl-tab">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">g-Age</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#7-8" role="tab" aria-controls="7-8" aria-selected="true">7-8</a>
                            <a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#9-10" role="tab" aria-controls="9-10" aria-selected="false">9-10</a>
                            <a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#11-12" role="tab" aria-controls="11-12" aria-selected="false">11-12</a>
                            <a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#13-14" role="tab" aria-controls="13-14" aria-selected="false">13-14</a>
                            <a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#15-16" role="tab" aria-controls="15-16" aria-selected="false">15-16</a>
                            <a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#17-18" role="tab" aria-controls="17-18" aria-selected="false">17-18</a>
                        </div>                        
                    </div>
                </nav>    
                test g
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade" id="7-8" role="tabpanel" aria-labelledby="7-8-tab">7-8</div>
                    <div class="tab-pane fade" id="9-10" role="tabpanel" aria-labelledby="9-10-tab">9-10</div>
                    <div class="tab-pane fade" id="11-12" role="tabpanel" aria-labelledby="11-12-tab">11-12</div>
                    <div class="tab-pane fade" id="13-14" role="tabpanel" aria-labelledby="13-14-tab">13-14</div>
                    <div class="tab-pane fade" id="15-16" role="tabpanel" aria-labelledby="15-16-tab">15-16</div>
                    <div class="tab-pane fade" id="17-18" role="tabpanel" aria-labelledby="17-18-tab">17-18</div>
                </div>
            </div>

        </div>
    </div>

Answer 1

您需要更改tabpanel 的ID。您需要确保每个tabpanel 的ID 是唯一的。 这是一个演示（在官方文档的示例中，它在带有下拉菜单的选项卡中使用<ul></ul> 和<li></li>，所以我也使用带有下拉菜单的<ul></ul> 和<li></li>）：

<div class="row">
    <div class="col-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-boy" role="tab" aria-controls="v-pills-boy" aria-selected="true">Boys</a>
            <a class="nav-link" id="v-pills-girl-tab" data-toggle="pill" href="#v-pills-girl" role="tab" aria-controls="v-pills-girl" aria-selected="false">Girls</a>
        </div>
    </div>

    <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">

            <div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
                <nav>
                    <ul class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
                        <li class="dropdown-menu">
                            <a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#b7-8" role="tab" >7-8</a>
                            <a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#b9-10" role="tab">9-10</a>
                            <a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#b11-12" role="tab">11-12</a>
                            <a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#b13-14" role="tab" >13-14</a>
                            <a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#b15-16" role="tab">15-16</a>
                            <a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#b17-18" role="tab">17-18</a>
                        </li>
                    </ul>
                </nav>
                test b
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade" id="b7-8" role="tabpanel" aria-labelledby="7-8-tab">7-8</div>
                    <div class="tab-pane fade" id="b9-10" role="tabpanel" aria-labelledby="9-10-tab">9-10</div>
                    <div class="tab-pane fade" id="b11-12" role="tabpanel" aria-labelledby="11-12-tab">11-12</div>
                    <div class="tab-pane fade" id="b13-14" role="tabpanel" aria-labelledby="13-14-tab">13-14</div>
                    <div class="tab-pane fade" id="b15-16" role="tabpanel" aria-labelledby="15-16-tab">15-16</div>
                    <div class="tab-pane fade" id="b17-18" role="tabpanel" aria-labelledby="17-18-tab">17-18</div>
                </div>
            </div>

            <div class="tab-pane fade" id="v-pills-girl" role="tabpanel" aria-labelledby="v-pills-girl-tab">
                <nav>
                    <ul class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">g-Age</a>
                        <li class="dropdown-menu">
                            <a class="dropdown-item nav-link" id="7-8-tab" data-toggle="tab" href="#g7-8">7-8</a>
                            <a class="dropdown-item nav-link" id="9-10-tab" data-toggle="tab" href="#g9-10">9-10</a>
                            <a class="dropdown-item nav-link" id="11-12-tab" data-toggle="tab" href="#g11-12">11-12</a>
                            <a class="dropdown-item nav-link" id="13-14-tab" data-toggle="tab" href="#g13-14">13-14</a>
                            <a class="dropdown-item nav-link" id="15-16-tab" data-toggle="tab" href="#g15-16">15-16</a>
                            <a class="dropdown-item nav-link" id="17-18-tab" data-toggle="tab" href="#g17-18">17-18</a>
                        </li>
                    </ul>
                </nav>
                test g
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade container" id="g7-8" role="tabpanel">7-8</div>
                    <div class="tab-pane fade container" id="g9-10" role="tabpanel">9-10</div>
                    <div class="tab-pane fade container" id="g11-12" role="tabpanel">11-12</div>
                    <div class="tab-pane fade container" id="g13-14" role="tabpanel" >13-14</div>
                    <div class="tab-pane fade container" id="g15-16" role="tabpanel">15-16</div>
                    <div class="tab-pane fade container" id="g17-18" role="tabpanel">17-18</div>
                </div>
            </div>

        </div>
    </div>
    html

结果：