angularjs ng-class控制li的样式

最新推荐文章于 2019-07-06 09:59:55 发布

LPLIFE

最新推荐文章于 2019-07-06 09:59:55 发布

阅读量613

点赞数

分类专栏： angularjs

本文链接：https://blog.csdn.net/LPLIFE/article/details/88997994

版权

angularjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

被点击时更换样式，点击下一个时恢复默认样式

写得比较简单：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        .sky {
            color: white;
            background-color: lightblue;
            padding: 20px;
        }
        
        .tomato {
            background-color: coral;
            padding: 40px;
        }
    </style>
</head>

<body ng-controller="ctrl">
    <ul>
        <li ng-click='li_click(1)' ng-class='{tomato: 1 == focus,sky: 1 !== focus}'>1</li>
        <li ng-click='li_click(2)' ng-class='{tomato: 2 == focus,sky: 2 !== focus}'>2</li>
        <li ng-click='li_click(3)' ng-class='{tomato: 3 == focus,sky: 3 !== focus}'>3</li>
    </ul>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);
        myApp.controller('ctrl', function($scope) {
            $scope.li_click = function(i) {
                $scope.focus = i;
            };

        });
    </script>

</body>

</html>