离子选项卡活动颜色

Question

我正在离子选项卡上工作。我想要显示我的离子选项卡蓝色的颜色在开始查看选项卡上。它正在工作，但点击后编辑密码蓝色颜色显示在编辑密码，但不能从查看tab.Again点击查看按钮，然后一切工作正常。我创建Codepen为[http://codepen.io/anujsphinx/pen/WopBLv]检查

Answer 1

我纠正了codepen和它的作品，但变化有许多：

• 首先的。正如其他班级所暗示的，重要的使用并不是一个好主意。当你使用重要的时候，其他的东西都会被覆盖，这会导致问题发现为什么一些类不适用于所有的元素等（看看这个描述problems caused from !important use的答案）。 ！重要的是必须谨慎使用，并尽可能避免，在这种情况下，这是可能的。

• 我纠正了IDS在标签的物品：你不应该使用相同的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'。

• 为了初始化有源元件的视图按钮，你只需要这一行控制器： $scope.activeButton='a'; 你并不需要访问的ID。避免使用离子和角度访问元素。视图中使用的变量和控制器更改的变量可以以安全可靠的方式为您提供相同的结果。

Answer 2

1），你应该创建两个CSS类：活跃和不活跃

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

2）添加 '身份证' 属性的各个环节

<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）你创建一个函数tha你把它用两个类之间t开关NG点击：

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; 
    }; 
}); 

希望这将帮助你!!!!!