参考 ：使用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. 怎样查看当前QQ的版本号是多少

    怎样查看当前QQ的版本号是多少.. -------------- -------------

  2. 第二章 R语言数据结构

    R语言存储数据的结构包括:标量.向量.矩阵.数组.数据框和列表:可以处理的数据类型包括:数值型.字符型.逻辑型.复数型和原生型. 数据结构 向量 向量是用来存储数值型.字符型或逻辑型数据的一维数组.单 ...

  3. 【渗透课程】第三篇-体验http协议的应用

    之前我们都了解了,访问网页时,客户端与服务端之间的请求与响应数据交互.本篇就浅谈它的应用. 利用HTTP拦截突破前段验证 比方说,我们在某个网页提交某些数据(例如留言.上传.插入xss等),发生错误( ...

  4. WPF蒙板弹窗

    由于界面设计需要,要给弹窗添加蒙板效果,在百度和google搜索了半天,竟然没有一个满意的方案,最后只能自己想办法实现了一个,原理还是比较简单的,现在分享给大家. 先看一下效果..      原理其实 ...

  5. redi安装

    借鉴文章:https://segmentfault.com/a/1190000010709337 在linux中使用wget时,若报-bash: wget: command not found,则表明 ...

  6. Thinkjs学习1—概述及MVC的粗略理解

    1.概述 ThinkJS 是一款使用 ES6/7 特性全新开发的 Node.js MVC 框架,对于之前是纯前端的童鞋,可能不了解MVC框架是什么,不知道后台和前台怎么配合. 本教程以Thinkjs2 ...

  7. 求最长公共前缀和后缀—基于KMP的next数组

    KMP算法最主要的就是计算next[]算法,但是我们知道next[]求的是当前字符串之前的子字符串的最大前后缀数,但是有的时候我们需要比较字符串中前后缀最大数,比如 LeetCode的shortest ...

  8. 用ajax与fetch调用阿里云免费接口

    最近学习态度比较积极,打算用react做一个小个人应用网站...所以从阿里云上买了些免费的接口,什么QQ音乐排行查询接口.IP地址查询.天气预报等等.调用时,发现身份校验可以通过简单修改头部信息的方式 ...

  9. CSS display使用

    .今天我们来分析一下display的一些用法,display样式在我们整个CSS设置中,非常重要,掌握好display,才能有效的解决CSS布局的问题,在理解display之前,我们先了解两个概念:块 ...

  10. echarts用法

    参考文档: https://github.com/xlsdg/vue-echarts-v3 1.下载echarts插件 $ npm install --save vue-echarts-v3 2.引入 ...