Bootstrap 5多下拉菜单标签页：选中子项后父标签未高亮问题求助

问题核心是Bootstrap的Tab组件默认不会联动下拉菜单的父标签状态——当点击下拉内的Tab项时，只有当前项会高亮，但父级标签不会自动添加active类。只需通过监听Tab切换事件手动同步父标签状态即可解决：

解决方案代码 #

在现有代码末尾添加这段jQuery逻辑：

$(document).on('show.bs.tab', '.dropdown-item.nav-link', function(e) {
    // 移除所有父标签的active类，避免多标签同时高亮
    $('.nav-tabs .nav-link.dropdown-toggle').removeClass('active');
    // 定位当前Tab所属的父下拉标签，添加active类
    $(this).closest('.dropdown').find('.dropdown-toggle').addClass('active');
});

完整可运行代码 #

同时修正了原始代码中重复id的HTML规范问题：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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="dropName1" 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="true">
                                    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="dropName2" 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-1-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>
  </div>
</div>

<script>
$(document).on('show.bs.tab', '.dropdown-item.nav-link', function(e) {
    $('.nav-tabs .nav-link.dropdown-toggle').removeClass('active');
    $(this).closest('.dropdown').find('.dropdown-toggle').addClass('active');
});
</script>

关键逻辑说明 #

• 监听show.bs.tab事件：这是Bootstrap Tab组件提供的原生事件，在Tab切换触发时执行，确保状态同步时机准确。
• 全局移除父标签active类：避免多个父标签同时处于高亮状态，保证视觉一致性。
• 定位当前父标签：通过closest('.dropdown')找到当前Tab项所在的下拉容器，再精准定位到父标签并添加active类。

内容的提问来源于stack exchange，提问作者Shaho