ionic tab按钮变颜色的例子

来源：互联网发布：广州华夏职业学院网络编辑：程序博客网时间：2024/04/28 16:50

页面代码

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

折腾了大半夜终于搞定

0 0