Question

我试图在角上使用* ngFor建立动态的锚标签列表，但我无法更改所选活动锚标签的背景颜色，我的主要html如下：

<div class="row">
 <div class="col-md-4">
  <app-zona-item
  *ngFor="let zonaEl of zonas"
  [zona]="zonaEl"></app-zona-item>
 </div>
 <div class="col-md-8">
   <h5>Lugares de estacionamento</h5>
 </div>
</div>

我的app-zone-item html如下：

<a
style="cursor: pointer;"
routerLinkActive="active"
class="list-group-item clearfix">
 <div class="pull-left">
  <h4 class="list-group-item-heading">{{zona.designacaoZona}}</h4>
  <p class="list-group-item-text">{{zona._id}}</p>
 </div>
</a>

它将呈现以下列表：

如何更改所选活动标签的背景。在Boostrap 3中，此代码有效，但在Bootstrap 4中不再可用。我需要更改的内容，或者还有另一种方法可以达到相同的结果。当我单击一个项目时，我想显示活动的锚标记并使用ID在另一个div上显示详细信息

Answer 1

好吧，您只需要少量CSS即可更改活动锚标记的背景颜色，只需添加以下CSS即可。

<!DOCTYPE html>
<html>
 <body>
  <style>
   a:active {
    background: orange !important;
   }
  </style>
  <a href="#">Visit W3Schools.com!</a>

 </body>
</html>

Boostrap4更改活动锚标签的背景

1 个答案: