离子标签活动颜色

Question

我正在使用离子选项卡。我想在视图选项卡上开始时显示我的离子选项卡的颜色为蓝色。它正在工作，但单击编辑密码后蓝色显示在编辑密码上，但未从视图选项卡中删除。再次单击查看按钮，然后一切正常。我为 [http://codepen.io/anujsphinx/pen/WopBLv] 检查创建了 Codepen

Answer 1

我已经更正了您的 codepen 并且它有效，但是其中的变化很多：

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

• 我更正了标签项的 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 类：活动和非活动

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

2) 为每个链接添加 'id' 属性

<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

<ion-content>
   <div class="tabs tabs-dark tabs-icon-top static">
      <a  class="tab-item " ng-class="{'myactive': isActive1({{1}})}"  ng-click="FunctionCall1(1)">
        <i class="icon ion-android-people" ></i> View
      </a>
      <a  class="tab-item" ng-class="{'myactive': isActive2({{2}})}"  ng-click="FunctionCall2(2)">
        <i class="icon ion-gear-a"></i> Edit Password
      </a>
   </div>
 </ion-content>

CSS：

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

控制器：

 $scope.$on('$ionicView.enter', function() {
    $scope.active1=1;
    $scope.FunctionCall1=function(val){
       $scope.active1=val;
       $scope.active2='';
    }

    $scope.FunctionCall2=function(val){
       $scope.active2=val;
       $scope.active1='';
    }

    $scope.isActive1 = function(type) {
        return type === $scope.active1;
    };

    $scope.isActive2 = function(type) {
        return type === $scope.active2;
    };
});

希望对你有帮助！！！！！！