Question

我正在使用Ionic Tab。我想在视图选项卡上显示我的离子选项卡蓝色。它正在工作但是点击编辑密码后蓝色颜色显示在编辑密码上但不从视图选项卡中删除。更多点击查看按钮然后一切正常。我为[http://codepen.io/anujsphinx/pen/WopBLv]检查

创建了Codepen

Answer 1

我已经更正了您的codepen并且确实有效，但更改的地方很多：

首先。正如其他课程所暗示的那样，使用！important并不是一个好主意。当您使用重要内容时，其他所有内容都会被覆盖，这会导致查找为什么某些类不适用于所有元素等的问题（请查看描述problems caused from !important use的答案）。！必须谨慎使用，并尽可能避免使用，在这种情况下，有可能。

我更正了标签项中的ID：您不应该对两个元素使用相同的ID！：

<a id="id_view" class="tab-item" ng-click="activeButton = 'a'; showme=false" ng-class="{ 'my_active': activeButton === 'a' }">
     <i class="icon ion-android-people" ></i> View
 </a>
 <a id="id_password" class="tab-item" ng-click="activeButton = 'b'; showme=true" ng-class="{ 'my_active': activeButton === 'b' }">
     <i class="icon ion-gear-a"></i> Edit Password
 </a>

您不需要两个课程。你需要活跃的课程。我称之为my_active。 ng-class="{ 'my_active': activeButton === 'a' }属性监视activeButton变量的值，如果它等于'a'，则该元素具有my_active类。如果没有，该元素没有类，因此它以非活动颜色显示。以同样的方式运行ng-class="{ 'my_active': activeButton === 'b'。
要将活动元素初始化为View按钮，您只需在控制器中使用以下行： $scope.activeButton='a'; 您不需要访问ID。避免使用离子和角度访问元素。视图中使用的变量和由控制器更改的变量可以安全可靠地为您提供相同的结果。

Answer 2

1）你应该创建两个css类：active和inactive

.myactive{
  background-color: #3166A2 !important;
}
.myinactive{
  background-color: #0a0a0a !important;
}

2）你添加了＃id;＆＃39;每个链接的属性

<a id="myId" class="tab-item " ng-click="activeButton = 'a'; showme=false" ng-class="{ 'myactive': activeButton === 'a' }">
    <i class="icon ion-android-people" ></i> View
</a>

3）您将活动类设置为在控制器中查看选项卡：

angular.element(document.querySelector('#myId')).addClass('myactive');

4）您创建了一个在两个类之间切换的函数，并使用ng-click调用它：

var myFunction = function(thisId){
    angular.element(document.querySelector('#thisId')).addClass('myactive');
    angular.element(document.querySelector('#otherId')).addClass('myinactive');
}

希望有助于你：）

Answer 3

使用以下代码检查，我在此处使用了活动功能

<强> HTML

x   y   z   N_notNAs
2   3   NA  NA
NA  1   3   NA
2   3   5   1
4   4   3   1

<强> CSS：

tmp

<强>控制器：

OnDeserializingAttribute

希望这会对你有所帮助!!!!!

离子Tab活跃的颜色

3 个答案: