Ionic Tab active color

Question

Я работаю над вкладкой Ionic. Я хочу показать цвет моей ионной вкладки синего цвета при запуске на вкладке вида .it работает, но после щелчка на значке редактирования синий цвет отображается на странице «Редактировать пароль», но не удаляется из view tab. Нажав на кнопку просмотра, все работает нормально. Я создал Codepen для этого [http://codepen.io/anujsphinx/pen/WopBLv] проверки

Answer 1

Я исправила codepen и она работает, но изменения, где многие:

• Прежде всего. Использование важного, как показывают другие классы, не является хорошей идеей. Когда вы используете важный, все остальное переопределяется, и это может вызвать проблемы с поиском, почему некоторые классы не применяются ко всем элементам и т. Д. (Посмотрите на этот ответ, который описывает problems caused from !important use). Важно соблюдать осторожность и избегать, если это возможно, и в этом случае это возможно.

• я исправил иду на вкладке пунктах: вы никогда не должны использовать один и тот же идентификатор для двух элементов !:

  <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'; Вам не нужно, чтобы получить доступ Идентификаторов. Избегайте доступа к элементам с ионным и угловым.Переменные, используемые в представлении и измененные контроллером, могут дать вам одинаковый результат безопасным и надежным способом.

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 т переключение между обоими классами, и вы называете его, используя нг-клик:

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

Надежда, что помогает u :)

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

CONTROLLER:

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

Надеюсь, что это поможет вам !!!!!