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

AngularJS Tab切换示例

最新推荐文章于 2024-05-27 01:13:13 发布

原创最新推荐文章于 2024-05-27 01:13:13 发布 · 5.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#angular #html

angular 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用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后。