<ul>
<li ng-repeat="(index, item) in headerList">
<a ui-sref="{{item.href}}"
ng-class="{selected: selectedIndex === index}"
ng-click="changeIndex(index)">
<span>{{item.name}}</span>
</a>
</li>
</ul>
controller('headerCtrl', function($scope, $location, $state) {
// 刷新时修正 selectedIndex
var path = $location.$$path.split('/')[1];
switch(path) {
case '':
$scope.selectedIndex = 0;
break;
case 'book':
$scope.selectedIndex = 1;
break;
case 'borrow':
$scope.selectedIndex = 2;
break;
case 'reader':
$scope.selectedIndex = 3;
break;
}
// 这里的href指的是ui-router的state的name
$scope.headerList = [{
href: 'home',
name: '首页'
},
{
href: 'book',
name: '图书管理'
},
{
href: 'borrow',
name: '借还管理'
},
{
href: 'reader',
name: '读者管理'
}
];
$scope.changeIndex = function(index) {
$scope.selectedIndex = index;
};
});

效果界面:

angularjs实现导航菜单切换高亮的更多相关文章

  1. Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

    Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区.       ...

  2. 织梦一二级导航菜单被点击顶级栏目高亮(加class)解决方法

    织梦一二级导航菜单被点击的栏目高亮显示方法详解,废话不多说直接举例说明: 织梦一级菜单被点击栏目高亮调用方法: {dede:channel typeid ='1'  type ='son' curre ...

  3. Angular+Bootstrap3导航菜单

    Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...

  4. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  5. js实现当前导航菜单高亮显示

    为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...

  6. Android 抽屉效果的导航菜单实现

    Android 抽屉效果的导航菜单实现 抽屉效果的导航菜单 看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而 ...

  7. DDD开发框架ABP之导航菜单

    每一个网站都会有导航菜单(通常不止一个),ASP.NET Boilerplate(后文简称ABP)提供了一种创建和使用菜单的通用架构,利用架构我们可以方便的创建菜单并显示给用户.本文主要说明菜单的创建 ...

  8. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  9. JQUERY 插件开发——MENU(导航菜单)

    JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...

随机推荐

  1. 一致性哈希算法原理、避免数据热点方法及Java实现

     一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT)实现算法,设计目标是为了解决因特网中的热点(Hot spot)问题,初衷和CARP十分类似.一致性哈希修正了CARP使用的简 单 ...

  2. 使用外网控制你的STM32单片机

    转自:http://blog.csdn.net/xdxlove/article/details/50837459 本文章假设读者已经在STM32单片机上成功移植LWIP,且已经实现在局域网内控制STM ...

  3. day1 java基础回顾-多线程

    启动线程方式 方式一:继承Thread. 1. 自定义一个类继承Thread类. 2. 重写Thread的run方法,把自定义线程的任务代码定义在run方法上. 3. 创建Thread子类的对象,并且 ...

  4. Python中的数据结构和算法

    一.算法 1.算法的时间复杂度 大 O 记法,是描述算法复杂度的符号O(1) 常数复杂度,最快速的算法. 取数组第 1000000 个元素 字典和集合的存取都是 O(1) 数组的存取是 O(1) O( ...

  5. android fragment ontouch 事件

    由于fragment是存在于activity之中的,所以触摸事件会被activity首先得到. 为了在fragment中执行ontouch方法,需要做如下处理: mFragment = new Tab ...

  6. 结对项目-ExamGeneration-四则运算试题生成与计算程序

    目录 ExamGeneration 进展 功能 调用示例 PSP表格 结对分工 功能模块详解 Chernobyl: -Gaveu: 运行测试 -Gaveu: Chernobyl: 项目总结与反思 Ch ...

  7. 数据库路由中间件MyCat - 使用篇(3)上篇

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 全局序列号 数据切分后,原有的关系数据库中的主键约束在分布式条件下将无法使用,因此需要引入外部机制保证数据唯 ...

  8. Linux shell 单引号和双引号

    在编写shell脚本的时候经常会用到引号,有些时候却老是忘记单引号和双引号之间的区别, 所以就整理一下供以后脑子不好使了的时候前来复习一下.首先说下他们的共同点: 好像就只有 一个,就是它们都可以用来 ...

  9. c#封装dll

    https://www.cnblogs.com/xingboy/p/10287425.html

  10. ps图层混合计算公式

    样式效果 http://www.jb51.net/photoshop/104100.html 注释: 1.混合模式的数学计算公式,另外还介绍了不透明度. 2.这些公式仅适用于RGB图像,对于Lab颜色 ...