angular点击button切换相对页面同时按钮变颜色

AngularJS Tab切换示例
本文介绍了一个使用AngularJS实现的Tab切换示例,通过不同的按钮来切换显示的内容,并利用ng-if指令和ng-class指令来控制显示效果及按钮的激活状态。

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后。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值