如何将Bootstrap导航选项卡下拉项显示为活动

Question

在我看来，我有一个包含下拉列表的引导导航标签。因此，在这里，我需要在用户转到某个下拉菜单项（例如，修改器组）时将下拉菜单的当前项显示为活动状态。但是现有的方式将所有下拉菜单项都显示为活动状态。

<ul class="page-title__nav common-list nav nav-tabs" style="margin-bottom: -5px;width: 700px;">
  <li class="dropdown active">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Inventory<b class="caret"></b></a>
    <ul class="dropdown-menu" style="margin-left: 5px; margin-right: 5px">
      <li><a data-toggle="tab" onclick="loadCategories()">Categories</a></li><br>
      <li><a data-toggle="tab" onclick="loadItems()">Items</a></li><br>
      <li><a data-toggle="tab" onclick="loadModifierGroups()">Modifier Groups</a></li><br>
    </ul>
  </li>
  <li><a data-toggle="tab" onclick="loadTenders()">Orders</a></li>
</ul>

Answer 1

引导程序3.3.7

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="table-responsive" id="commonDvScroll">
  <table id=table></table>
</div>

引导程序4.3.1

Attributes