html：需要选中的列突出显示

Question

在离子框架的html中，我需要突出显示的部门在选中时留在那里。但是，只有当我点击div然后它才会消失时，它才会突出显示。

很难区分我所选择的内容。

HTML

  <div class="col col-33" ng-click="reverse = (orderWith=='Stock')? !reverse: reverse;orderWith='Stock'" >Stock<i class="icon" style="float:left" ng-class="{'ion-chevron-down': reverse, 'ion-chevron-up': !reverse}"></i></div>
    <div class="col" ng-click="reverse = (orderWith=='Trade')? !reverse: reverse;orderWith='Trade'">Call<i class="icon" style="float:left" ng-class="{'ion-chevron-down': reverse, 'ion-chevron-up': !reverse}"></i></div>
    <div class="col" ng-click="reverse = (orderWith=='Price')? !reverse: reverse;orderWith='Price'">Price<i class="icon" style="float:left" ng-class="{'ion-chevron-down': reverse, 'ion-chevron-up': !reverse}"></i></div>

CSS

 .col{
  border-right: solid 1px #3f56a8;
  padding-top: .35em;
}
.col:active{
  background-color: #1b4e84;
    color:aqua !important;
}

我将活动更改为焦点，但它根本不起作用