参考 ：使用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. JavaWeb王者归来学习笔记

    JavaWeb王者归来学习笔记... Ajax王者归来: Ajax:Asynchronous JavaScript And XML -------Ajax 是一些旧有技术的结合.但却以一种新的姿态.披 ...

  2. Postman测试http接口

    一.安装 官网:https://www.getpostman.com/ Postman是一个Chrome的一个插件工具,我们可以通过Chrome的应用商店进行进行搜索并安装,安装完成会在桌面上显示一个 ...

  3. poj 2492 a bug's life 简单带权并查集

    题意大致为找同性恋的虫子.... 这个比食物链要简单些.思路完全一致,利用取余操作实现关系之间的递推. 个人感觉利用向量,模和投影可能可以实现具有更加复杂关系的并查集. #include<ios ...

  4. python+selenium自动化软件测试(第5章)：Selenium Gird

    5.1 分布式(Grid) Selenium grid是用来分布式执行测试用例脚本的工具,比如测试人员经常要测试多浏览器的兼容性,那就可以用到grid了.下面就来介绍如何在多个浏览器上运行同一份脚本. ...

  5. jquery表单验证源码

    /**数据验证完整性**/$.fn.Validform = function () {    var Validatemsg = "";    var Validateflag = ...

  6. [Caffe]使用经验积累

    Caffe使用经验积累 本贴记录Caffe编译好了,使用过程的常用命令与常见错误解决方式.如果对编译过程还存在问题,请参考史上最全的caffe安装过程配置Caffe环境. 1 使用方法 训练网络 xx ...

  7. 一,ESP8266下载和刷固件

    用自己的小板测试...... 安排上呢 一, ESP8266下载和刷固件(Lua开发----体验一下lua开发的魅力所在) 二, 控制一个灯亮灭 三, TCP服务器 四, TCP客户端 五, UDP ...

  8. 团队作业4——第一次项目冲刺（Alpha版本）4.23

    ·本次会议为第二次Scrum Meeting会议~ ·本次会议项目经理召开时间为17:00,在教学楼教室召开,召开时长约30分钟,探讨了昨日任务的进展.查重功能.今日要做的任务以及后续所要开展的工作. ...

  9. 201521123025 <<java程序设计>>第3周学习总结

    1. 本周学习总结 2. 书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

  10. 解决"应用程序无法启动,因为应用程序的并行配置不正确"问题

    想必不少人都会遇到题目中的问题.我在一次和舍友一起重装系统的时候变遇到了上述的问题, 经过仔细分析发现电脑会出现上述问题所必要的条件 系统中没有存在合理的运行库文件 所运行的软件是之前重装系统之间留下 ...