html代码:
#aaa .active{
background-color: #7dc35a !important;}
<div class="portlet-body">
<div id="aaa">
<button class="pull-left" type="button" ng-class="{ 'changeTab' : data.current == 1,
'active': data.current == 1}" ng-click="setCurrent(1)">第一个</button>
<button class="pull-left" type="button" ng-class="{ 'changeTab' : data.current == 2 ,
'active': data.current == 2}" ng-click="setCurrent(2)">第二个</button>
<button class="pull-left" type="button" ng-class="{ 'changeTab' : data.current == 3 ,
'active': data.current == 3}" ng-click="setCurrent(3)">第三个</button>
</div>
<div>
<div ng-if="data.current == 1">
<div class="portlet-body">
第一个button对应的内容
</div>
</div>
<div ng-if="data.current == 2">
<div class="portlet-body">
第二个button对应的内容
</div>
</div>
<div ng-if="data.current == 3">
<div class="portlet-body">
第三个button对应的内容
</div>
</div>
</div>
</div>
js代码:
$scope.data = {
current: "1" // tab's number
}
$scope.setCurrent= function (param) {
$scope.data.current = param;
}
如果点击了按钮 触发setCurrent函数,data.current会有对应的值, ng-if 会把对应的值绑定到div上,true的话,显示该div内容。同时active存在在button上,样式表的按钮颜色附加到按钮上。
ng-class里的值会附加到class后。