参考 ：使用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. Class类 获取Class对象

    阅读API的Class类得知,Class 没有公共构造方法.Class 对象是在加载类时由 Java 虚拟机以及通过调用类加载器中的 defineClass 方法自动构造的 获取Class对象的三种方 ...

  2. Python数据类型-布尔/数字/字符串/列表/元组/字典/集合

    代码 bol = True # 布尔 num = 100000000; # 数字 str = "fangbei"; # 字符串 str_cn = u"你好,方倍" ...

  3. BotVS数字货币现货交易类库

    以下是BotVS数字货币现货交易类库模板,使用Python2语言实现 import types # 导入类型模块 import time # 导入时间模块 import platform # 版本信息 ...

  4. Oracle异常汇总

    持续更新中,可参见https://hnuhell.gitbooks.io/oracle_errmg/content/或https://hnuhell.github.io/Oracle_ERRMG/上的 ...

  5. 永久关闭selinux | 防火墙

    关闭SELinux的两种方法 1 永久方法 – 需要重启服务器 修改/etc/selinux/config文件中设置SELINUX=disabled ,然后重启服务器. 2 临时方法 – 设置系统参数 ...

  6. Django 学习笔记（七）数据库基本操作（增查改删）

    一.前期准备工作,创建数据库以及数据表,详情点击<Django 学习笔记(六)MySQL配置> 1.创建一个项目 2.创建一个应用 3.更改settings.py 4.更改models.p ...

  7. JavaScript笔记之第一天

    JavaScript 1.JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据: 使用 window.alert() 弹出警告框. 使用 document.write() ...

  8. openssl命令

    author:JevonWei 版权声明:原创作品 1.构建根证书 构建根证书前,需要构建随机数文件(.rand),完整命令如 openssl rand -out private/.rand 1000 ...

  9. jQuery插件——ajax

    一.ajax请求 1.load(url, [data], [callback]) 概述:加载远程的HTML文件代码,并插入到指定的DOM节点中. 参数:url:待装入 HTML 网页网址. data: ...

  10. 前端js优化方案（连续更新）

    最近在读<高性能javascript>,在这里记录一下读后的一些感受,顺便加上自己的一些理解,如果有兴趣的话可以关注的我的博客http://www.bloggeng.com/,我会不定期发 ...