参考 ：使用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. 7.31.2 this关键字

    this用在所有方法中:    用来区分局部变量和成员变量的名字二义性! 如:在set方法中这样写:name = name; 则java会遵循"谁近谁优先"的规则,会给局部变量赋值 ...

  2. 大学写作期中作业--霸天黄小o

    霸天黄小o 百无聊赖之中,小o又回想起了它当初的辉煌时刻. 那是凤儿凰自行车厂的又一次大规模交货.虽然其实在500万的订单下,一批又一批的交货几乎是连着的. 但这并不影响小o和与它一届的同学们的意气风 ...

  3. 四种JavaScript隐式类型转换的总结

    一般存在四种情况,JavaScript会对变量的数据类型进行转换. 目录 * if中的条件会被自动转为Boolean类型 * 会被转为false的数据 * 会被转为true的数据 * 参与+运算都会被 ...

  4. Python包管理工具和多版本环境管理

    1. Python包管理工具 在安装Python包的过程中,经常涉及到distutils.setuptools.distribute.setup.py.easy_install.easy_instal ...

  5. 420小时学习代码之后:如何教你免费自学Python

    原文地址:learning-to-code-420-hours-later-how-to-teach-yourself-python-for-free 说明:有些网址需要FQ. 大约在1.5年前,我开 ...

  6. Linux程序设计综合训练之简易Web服务器

    1.功能需求: (1)学习网络套接字编程.HTPP协议.Web服务器等知识: (2)设计一简单Web服务器,提供静态网页浏览服务功能. 2.实现的功能: (1)C语言实现基于socket的Web服务器 ...

  7. tomcat设置文件编码

    tomcat修改bin文件夹下面的catalina.bat文件可以解决乱码在文件中加上JAVA_OPTS="-server -Xms128M -Xmx4096M -XX:PermSize=5 ...

  8. 《Java从入门到放弃》JavaSE入门篇：异常

    异常!!!看看生活中的异常例子: 正常情况下,从家到公司上班,只需要20分钟!但如果在路上碰到堵车或修路或车突然自燃等问题,那就没办法正常去上班了.其中堵车或修路或车突然自燃等问题就属于异常. 碰到异 ...

  9. 【2017集美大学1412软工实践_助教博客】团队作业4——第一次项目冲刺（Alpha版本）小组 成绩

    第四次团队作业成绩公布 题目 团队作业4: http://www.cnblogs.com/happyzm/p/6722264.html 团队成绩 成绩公示如下: 检查项 会议内容 代码签入 心得体会或 ...

  10. 201521123090 《Java程序设计》 第8周学习总结

    本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1) 1.1 ...