css中的离子覆盖活动元素

Posted 2023-03-12

【中文标题】css中的离子覆盖活动元素

【英文标题】：ionic overwrite active element in css

【发布时间】：2015-10-10 07:27:27

【问题描述】：

我尝试了许多来自 stackoveflow 的示例答案，但没有一个对我的应用程序有用 请帮我解决我的问题 非常感谢你

侧边菜单：

<ion-list class="side" id="sideMenuActive">
  <ion-item menu-close href="#/sideMenu/home">
    <i class="icon ion-ios-home-outline"></i>&nbsp; HOME
  </ion-item>
  <ion-item menu-close href="#/sideMenu/myDeal">
    <i class="icon ion-compose"></i>&nbsp; PROFILE
  </ion-item>
</ion-list>

CSS：

#sideMenuActive .activebackground: #000000 !important;

【参考方案1】：

ion-item 指令在其内容中注入一个“a”元素。这是您定义样式时需要使用的元素。

<ion-list>
    <ion-item ui-sref=".item1" ui-sref-active="active">Item 1</ion-item>
    <ion-item ui-sref=".item2" ui-sref-active="active">Item 2</ion-item>
</ion-list>

CSS：

ion-list ion-item.active  a 
    background-color: #000 !important; 

注意：您必须（在某个地方）将“活跃”类添加到您的活跃离子项目中。我通过使用指令 ui-sref-active 来做到这一点。 另请注意，Ionic 使用 Angular-UI 路由器，因此您最好使用 ui-sref 而不是 href 作为链接。 ui-sref 允许您直接将路由的名称作为参数提供（因此，您不必处理任何 URI）。