Как отобразить активный элемент начальной страницы начальной загрузки как активный - PullRequest
Новая
       23

Как отобразить активный элемент начальной страницы начальной загрузки как активный

0 голосов
/ 02 апреля 2019

На мой взгляд, у меня есть навигационная вкладка начальной загрузки, которая включает в себя выпадающий список.Поэтому здесь мне нужно показать текущий элемент раскрывающегося списка как активный, когда пользователь переходит к определенному элементу раскрывающегося списка (например, к группам модификаторов).Но существующий способ показывает все выпадающие элементы как активные. 

<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>

the current view

1 Ответ

0 голосов
/ 02 апреля 2019

Bootstrap 3.3.7

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <ul class="nav nav-pills">
   <li class="dropdown active">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Inventory <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Categories</a></li>
            <li><a href="#">Items</a></li>
            <li><a href="#">Modifier Groups</a></li>
            
          </ul>
        </li>
    <li><a href="#">Orders</a></li>
    
  </ul>

Bootstrap 4.3.1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
  
  <li class="nav-item dropdown">
    <a class="nav-link active dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Inventory</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Categories</a>
      <a class="dropdown-item" href="#">Items</a>
      <a class="dropdown-item" href="#">Modifier Groups</a>
      
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Orders</a>
  </li>
  
</ul>
...