嵌套的引导程序选项卡未更改为活动状态，而选项卡列表中的活动状态正在更改

Question

我有第一个带有选项卡集1的主面板，第二个带有2个子选项卡set2和set的嵌套面板。

在单击“设置1”选项卡时，第二个面板将打开并显示设置2的内容。 当我单击设置3时，我仍然应该看到设置2的内容。

我看到活动在选项卡列表中发生了变化，我还可以尝试使用检查源代码将活动类从set 2更改为set 3，并且可以正常工作，但set 3的内容也再次出现在set 2的内容中。

<div class="row">
    <div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
        <div class="panel">
            <div class="panel-heading">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" id="outer_tab1"><a id="outer_tab11" href="#outer_tab1" aria-controls="outer_tab1" role="tab" data-toggle="tab">outer_tab1 Info</a></li>
                    <li role="presentation" id="outer_tab2"><a href="#outer_tab2" aria-controls="outer_tab2" role="tab" data-toggle="tab">Create Complaint</a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="outer_tab1">
                    <div class="row" id="pp_row" style="display:none">
                        <div class="col-sm-12 col-md-offset-1 col-md-12 col-lg-offset-0 col-lg-12">
                            <div class="panel">

                                <div class="panel-heading">
                                    <!-- Nav tabs -->
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li role="presentation" id="set2"><a href="#set2" aria-controls="set2" role="tab" data-toggle="tab">Set2</a></li>
                                        <li role="presentation" id="set3"><a href="#set3" aria-controls="set3" role="tab" data-toggle="tab">set3</a></li>
                                    </ul>
                                </div>
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane " id="set2">
                                        <div id="info" class="form-horizontal"> <br />
                                            <div class="panel">
                                                <div class="panel-heading">
                                                    <h2 class="panel-title"> <b>Payment & Installment Information <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
                                                </div>
                                                <div class=" panel-body table-responsive option-content is-hidden">
                                                    <div id="mem_table" width="550px" align="center"> </div>
                                                    </td>
                                                </div>
                                                <!----subpanel--->
                                            </div>
                                            <!----panel--->
                                        </div>
                                        <!----div pp member--->
                                    </div>
                                    <div role="tabpanel" class="tab-pane active " id="set3">
                                        <div id="set3_table" class="form-horizontal" style="display:block"> <br />
                                            <div class="panel">
                                                <div class="panel-heading">
                                                    <h2 class="panel-title"> <b>set3 Status <span style="color: #0066ff;display:block; text-align: center; font-weight: bold; margin: 10px 0 5px; font-size: 16px;"></span></b> </h2>
                                                </div>
                                                <div class="panel-body table-responsive option-content is-hidden">
                                                </div>
                                                <!----subpanel--->
                                            </div>
                                            <!----panel--->
                                        </div>
                                        <!----div "set3"member--->
                                    </div>
                                </div>
                                <!----tabcontent---->
                            </div>
                            <!----div panel--->
                        </div>
                    </div>
                    <!----div col---->
                </div>
                <!---row--->
            </div>
        </div>
        <!----div col---->
    </div>
    <!---row--->
</div>