导航栏 .active激活

最新推荐文章于 2021-03-31 10:16:00 发布

转载最新推荐文章于 2021-03-31 10:16:00 发布 · 526 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tonghaolang/p/5972930.html

文章标签：

#python #javascript #ViewUI

本文提供了一个使用AngularJS创建导航栏的示例代码，通过两个不同的控制器展示了如何实现点击列表项时更改样式的效果，并保持与其他项的区别。第一个控制器允许多个列表项同时选中，而第二个控制器则确保任何时候只有一个列表项处于选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：使用angularjs写一个导航栏控制器

1.点击其中一个li其他的class不影响

2.点击其中一个li其他的class影响

<!DOCTYPE html>
<html lang="en"  ng-app='ui.bootstrap.demo'>
<head>
    <meta charset="UTF-8">
    <title>test alert</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
    <script src="https://code.angularjs.org/1.5.8/i18n/angular-locale_zh-cn.js"></script>
    <style>
        .list{list-style: none;}
        .list .list-item{height:35px;line-height: 35px;width:auto;cursor: pointer;border-bottom: 1px solid green;}
        .list .list-item:hover{background-color: lightblue;}
        .selected{background-color: blue;}
    </style>
</head>
<body>
    <div ng-controller="alertDemoCtrl">
        <ul class="list">
            <li ng-repeat="list in lists" ng-click="list.active=!list.active"  ng-class="{selected:!list.active}" class="list-item">{{list.value}}</li>
        </ul>
    </div>
    <div ng-controller="demoCtrl">
        <ul class="list">
            <li ng-repeat="list in lists" ng-click="itemClick($index)"  ng-class="{selected:selectedItem==$index}" class="list-item">{{list.value}}</li>
        </ul>
    </div>
    <script>
        angular.module('ui.bootstrap.demo', [ 'ui.bootstrap']).controller('alertDemoCtrl',function($scope,$animate){
            $scope.lists=[{value:'列表一',active:'false'},{value:'列表一',active:'false'},{value:'列表一',active:'false'}]
            
        })
        .controller('demoCtrl',function($scope){
            $scope.lists=[{value:'列表二',active:'false'},{value:'列表二',active:'false'},{value:'列表二',active:'false'}];
            $scope.selectedItem=null;
            $scope.itemClick=function($index){
                $scope.selectedItem=$index;
            }
        })
    </script>
</body>
</html>