在angular中为我们提供了3种方案处理class:

1:scope变量绑定

2:字符串数组形式。

3:对象key/value处理。

第一种我们不推荐使用,看看其他两种解决方案:

字符串数组形式

字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如;

<spanng-class="{true:'btn01hover',false:'btn01'}[isActive]"ng-click="isActive=true">赛事介绍</span><spanng-class="{true:'btn02',false:'btn02hover'}[isActive]"ng-click="isActive=false">赛事合作</span>

varapp=angular.module('myApp',[]);app.controller('tabCtr',function($scope){//$scope.data={};//$scope.data.show=true;//初始化scope下的变量$scope.isActive=true;})

对象key/value处理

<spanng-class="{btn01:true,hover:isActive}"ng-click="isActive=true">赛事介绍</span><spanng-class="{btn02:'true',hover:!isActive}"ng-click="isActive=false">赛事合作</span>

varapp=angular.module('myApp',[]);app.controller('tabCtr',function($scope){//$scope.data={};//$scope.data.show=true;//初始化scope下的变量$scope.isActive=true;})

配合ng-show实现tab切换功能

<spanng-class="{btn01:true,hover:isActive}"ng-click="isActive=true">赛事介绍</span><spanng-class="{btn02:'true',hover:!isActive}"ng-click="isActive=false">赛事合作</span><pclass="game_tab_change"ng-show="isActive"><pclass="game_desc_title"><p>学子易贷<span>杯赛事介绍</span></p><pclass="desc">此次联赛涵盖全国十个分赛区,分别为:北京、上海、广东、江苏、浙江、安徽、青岛、湖南、湖北、福建十个赛区。在赛期设置上分为春季赛、秋季赛和总决赛。其中春季赛所覆盖的赛区为:上海、江苏、浙江、安徽、青岛;秋季赛所覆盖赛区为:北京、广东、湖北、湖南、福建。</p><p>校区赛:<span>各校区附近网吧</span>分区赛:<span>网咖</span>赛区赛:<span>各赛区省会</span>总决赛:<span>上海</span></p></p><pclass="game_desc_time"><p><span>4月8日-5月8日</span><span>5月21日-6月5日</span><span>6月10日-6月12日</span><spanclass="last">2016年6月18日</span></p><p><span>校园赛时间</span><span>分区赛时间</span><span>赛区赛时间</span><spanclass="last">总决赛时间</span></p></p></p><pclass="game_tab_change"ng-show="isActive==false"><pclass="game_host"><p>1.主办方:学子易贷</p><p>2.协办方:无锡市电子竞技协会</p><p>3.赞助方:.....</p><p>4.合作方:高校电竞社团</p><pclass="Remark">备注:高校电竞社团与学子易贷达成合作意向并成功帮助学子易贷完成高校报名宣传以及后续工作可以登录学子易贷官网—“学子公益”申请社团活动资金1000元,并升级成为学子易贷的高校合作社团,每月享受600元的社团活动补助(寒暑假不享受)。</p></p></p>