时间戳

首页 > 解决方案 > 如何在使用angular8单击的下拉值上显示活动状态

css - 如何在使用angular8单击的下拉值上显示活动状态

问题描述

我正在使用 Angular8 应用程序，其中我有导航栏，我有 3 个下拉值，即代理、潜在客户和竞争对手，如果我点击代理它没有被突出显示，所以即使我点击的下拉值，它应该保持突出显示，除非我手动点击其他选项。

HTML：

  <li>
      <a data-toggle="collapse" href="#collapseExample" class="d-flex align-items-center">
        <i class="fas fa-bullhorn"></i>
        <span class="d-flex flex-grow-1">Marketing</span>
      </a>
      <div class="collapse list-group show" id="collapseExample">
        <a href="javascript:void(0)" class="d-flex align-items-center list-group-item list-group-item-action">
          <i class="fas fa-users"></i>
          <span class="d-flex flex-grow-1">Agents</span>
        </a>
        <a href="javascript:void(0)" class="d-flex align-items-center list-group-item list-group-item-action">
          <i class="fas fa-users"></i>
          <span class="d-flex flex-grow-1">Prospects</span>
        </a>
        <a href="javascript:void(0)" class="d-flex align-items-center list-group-item list-group-item-action">
          <i class="fas fa-users"></i>
          <span class="d-flex flex-grow-1">Competitors</span>
        </a>
      </div>
    </li>

CSS：

.list-group-item-action:active {
    color: #fff;
    background-color: #294f75;
    border-color: #294f75;
}

演示

标签： cssangularbootstrap-4

解决方案

看来您误解了:active伪类。

一个元素只有在您单击它或以编程方式激活它时才“活动”。也许:focus伪类更适合您的需求。如果没有，那么您将不得不跟踪代码中的选定元素并添加基于该元素的类/样式

选定元素示例

推荐阅读