在离子框架中突出显示活动选项卡项

Question

我使用<ion-tabs>创建了标签。每件事都运行正常，但我无法更改活动标签背景颜色。

 <ion-tabs class="tabs-striped tabs-positive">
            <ion-tab id="personalDetails" title="Personal" href="#/newcustomer/PersonalDetails" ng-class="{{createUserStatus.personaldetails == true ? 'activeTab': ''}}">
                <ion-nav-view name="newcustomer-PersonalDetails"></ion-nav-view>
            </ion-tab>
            <ion-tab id="familyDetails" title="Family &amp; Housing" href="#/newcustomer/FamilyDetails" disabled="true" ng-class="{{createUserStatus.personaldetails == true ? 'activeTab': ''}}">
                <ion-nav-view name="newcustomer-FamilyDetails"></ion-nav-view>
            </ion-tab>
    </ion-tabs>

我尝试使用css，但没有工作

.activeTab a.tab-item{
  background: red !important;
}

Firebug看起来像这样，

我需要为标签应用css。我该如何申请？

Answer 1

您必须覆盖Ionic CSS类 .tab-item.tab-item-active ，例如添加到自定义.css文件中：

.tab-item.tab-item-active, .tab-item.active, .tab-item.activated {
    opacity: 1;
    background: red;
}