参考 ：使用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>

导航栏 .active激活的更多相关文章

  1. 导航栏 active 跟随鼠标效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  3. vue-router+elelment-ui，实现导航栏激活高亮

    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" backgrou ...

  4. 运用active和hover实现导航栏的页面切换

    .nav ul li a:hover{ background: #3E6EDD;}.nav ul li a:hover img{ display: block;}.nav ul li a.active ...

  5. AngularJS 导航栏动态添加.active

    在传统jQuery中,实现导航栏动态添加.active类的思路比较简单,就是当点击的时候,清除其他.active,然后给当前类加上.active. 但是在AngularJS中,就不能再采用这种jQue ...

  6. [moka同学笔记]yii2.0导航栏

    导航栏 <?php use yii\helpers\Url; /** * $navbar说明 * label:显示的标签 * url:跳转地址 * action:判断激活的操作 * class: ...

  7. 如何做一个导航栏————浮动跟伪类（hover）事件的应用

    我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...

  8. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  9. sencha touch 扩展官方NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮(2014-5-15)

    扩展视频讲解:http://www.cnblogs.com/mlzs/p/3652094.html官方NavigationView详解:http://www.cnblogs.com/mlzs/p/35 ...

随机推荐

  1. SpringMVC表单中post请求转换为put或delete请求

    1.在web.xml文件中配置  <!-- HiddenHttpMethodFilter过滤器可以将POST请求转化为put请求和delete请求! -->    <filter&g ...

  2. spring学习笔记1

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATQAAAEBCAIAAAB5VM7WAAAgAElEQVR4nOy9Z3gc13n3zZT3efPESZ

  3. 微信小程序周报（第十三期）-极乐商店(store.dreawer.com)出品

    重要:极乐商店域名变更:wxapp.dreawer.com/变更为store.dreawer.com/ 每周一笑 当年刚学打篮球的时候,疯狂地迷恋上了乔丹,然后迷恋上了NIKE,更熟记了NIKE的那句 ...

  4. jQuery绑定事物处理器

    绑定与移除1..bind() 绑定事件可以有2个或者3个参数:第一个参数为事件类型 第二个参数为处理函数 第三个为布尔类型 on()事件代替2..delegate() 事件委托,三个参数,第一个为选择 ...

  5. Maven 项目 @Override must override a superclass method` 问题

    问题 Maven 项目 @Override must override a superclass method` 原因 JDK 在1.5以上的版本,才支持@Override 注解 解决方法 (1)po ...

  6. hdu5673 Robot 卡特兰数 / 默慈金数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5673 分析: 这道题是一道裸的默慈金数,比较容易想到的是用卡特兰数来做.不了解的可以先学习一下. 卡特 ...

  7. 车牌识别OCR—易泊时代智慧城市解决方案模块

    牌识别(License Plate Recognition,LPR) 是视频图像识别技术在智能交通领域中的一个模块.车牌识别运用OCR技术,将视频流或图片中的汽车牌照从复杂的应用场景中提取并识别出来, ...

  8. Mysql分页处理（PageHelper）

    第一次做分页处理(完全不知道分页处理到底要做成什么样?) 理解:其实就是前台页面通过传递不同的参数{1.查询的条件.2.查询页数(pageNum),3每页展现的条数(pageSize)},之后我们(只 ...

  9. Oracle：解锁scott用户及设置密码

    关于Oracle 10g scott用户解锁的方法两则 解决方法一. 首先确认已经安装oracle 数据库和客户端 在客户端DOS下执行如下语句: 注意提示符号 c:\sqlplus /nolog s ...

  10. 循环checked表单 元素

    var poject_Array = "";            $('input[name="yearCardPoject"]:checked').each ...