ionic tab按钮变颜色的例子

页面代码

  <ion-footer-bar>
				<div class="tabs tabs-icon-top tabs-light"  >
				  <a class="tab-item"     ng-click="sel_tab('tab1')"    >
				    <i class="icon ion-chatbubble-working"  ng-style="tab1_color"  ></i>
				    	<span  ng-style="tab1_color"  >日内波段</span>
				  </a>
				  <a class="tab-item"     ng-click="sel_tab('tab2')">
				    <i class="icon ion-chatbubble" ng-style="tab2_color" ></i>
				    	<span  ng-style="tab2_color"  >隔日波段</span>
				  </a>				  


				  <a class="tab-item"   ng-click="sel_tab('tab3')" >
				    <i class="icon ion-gear-a" ng-style="tab3_color"></i>
				    <span  ng-style="tab3_color"  >设置</span>
				  </a>
				</div>
      </ion-footer-bar>

javascript代码：

myApp.controller('TabController', function($scope) {
   $scope.tab1_checked=true;
   $scope.tab2_checked=false;
   $scope.tab3_checked=false;
   $scope.curtab="tab1";
   $scope.tab1_color={color:'red'};
   $scope.tab2_color="";
   $scope.tab3_color="";
   $scope.sel_tab = function(vtab) {
     if(vtab=="tab1"){
     		console.log("------TabController.sel_tab-1");
     	 	$scope.tab1_checked=true;
   			$scope.tab2_checked=false;
   			$scope.tab3_checked=false;
   			$scope.curtab="tab1";
   			$scope.tab1_color={color:'red'};
   			$scope.tab2_color="";
   			$scope.tab3_color="";
   			 
   			
     }else if (vtab=="tab2"){
     		console.log("------TabController.sel_tab-2");
     	  $scope.tab1_checked=false;
   			$scope.tab2_checked=true;
   			$scope.tab3_checked=false;
   			$scope.curtab="tab2";
   			$scope.tab1_color="";
   			$scope.tab2_color={color:'red'};
   			$scope.tab3_color="";   			
     }else if (vtab=="tab3"){
     		console.log("------TabController.sel_tab-3");
     	  $scope.tab1_checked=false;
   			$scope.tab2_checked=false;
   			$scope.tab3_checked=true;
   			$scope.curtab="tab3";
   			$scope.tab1_color="";
   			$scope.tab2_color="";
   			$scope.tab3_color={color:'red'};     			
     }
     
  	};
});

折腾了大半夜终于搞定