bootstrap 5 带有选项卡窗格的多选项卡下拉列表

Question

我正在使用 Bootstrap 5.3 和查询 3.7.1

我正在尝试创建一个具有多个下拉菜单的选项卡。选项卡和下拉菜单有效并打开正确的窗格。它还突出显示了所选的正确下拉列表。

但它没有突出显示所选项目的正确选项卡。知道如何解决这个问题吗？谢谢你。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container">
    <div class='row'>
<div class='col-md-12'>
                <ul class="nav nav-tabs tabs-line d-flex justify-content-center mb-4" role="tablist">
                    <li class="nav-item dropdown" role="presentation">
                        <a href="#" id="dropName" class="nav-link dropdown-toggle active" data-bs-toggle="dropdown"
                            role="button" aria-expanded="false">TAB 1</a>
                        <ul class="dropdown-menu">
                            <li class="nav-item drop-item">
                                <button class="dropdown-item nav-link active" id="tab-1" data-bs-toggle="tab"
                                    data-bs-target="#tabs-1" type="button" role="tab" aria-controls="tabs-1"
                                    aria-selected="false">
                                    tab 1 Item 1
                                </button>
                            </li>
                            <li class="nav-item drop-item">
                                <button class="dropdown-item nav-link" id="tab-1-2" data-bs-toggle="tab"
                                    data-bs-target="#tabs-1-2" type="button" role="tab" aria-controls="tabs-1-2"
                                    aria-selected="false">
                                    tab 1 Item 2
                                </button>
                            </li>
                        </ul>
                    </li>

                    <li class="nav-item dropdown" role="presentation">
                        <a href="#" id="dropName" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
                            role="button" aria-expanded="false">TAB 2</a>
                        <ul class="dropdown-menu">
                            <li class="nav-item drop-item">
                                <button class="dropdown-item nav-link" id="tab-2" data-bs-toggle="tab"
                                    data-bs-target="#tabs-2" type="button" role="tab" aria-controls="tabs-2"
                                    aria-selected="false">
                                    Tab 2 Item 1
                                </button>
                            </li>
                            <li class="nav-item drop-item">
                                <button class="dropdown-item nav-link" id="tab-2-2" data-bs-toggle="tab"
                                    data-bs-target="#tabs-2-2" type="button" role="tab" aria-controls="tabs-2-2"
                                    aria-selected="false">
                                    tab 2 Item 2
                                </button>
                            </li>
                        </ul>
                    </li>

                </ul>
                <div class="tab-content" id="content">
                    <div class="row tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tab-1">
                        <H1>This Is Content Of Item 1 1 </H1>
                    </div>
                    <div class="row tab-pane fade" id="tabs-1-2" role="tabpanel" aria-labelledby="tab-2">
                        <H1>This Is Content Of Item 1 2 </H1>
                    </div>

                    <div class="row tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tab-2">
                        <H1>This Is Content Of Item 2 1 </H1>
                    </div>
                    <div class="row tab-pane fade" id="tabs-2-2" role="tabpanel" aria-labelledby="tab-2-2">
                        <H1>This Is Content Of Item 2 2 </H1>
                    </div>
                </div>
            </div>