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

Question

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

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

我想做的事：

• 显示测试-b或test-g下的年龄组。取决于.
• 示例中的选项卡im :如果我选择17-18，我希望在test-b下显示17-18；如果im在男孩选项卡

中。

到目前为止我尝试过的是：

• 基本上只是移动选项卡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，.You需要确保每个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

结果：

​