<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. 洛谷 P4106 / bzoj 3614 [ HEOI 2014 ] 逻辑翻译 —— 思路+递归

    题目:https://www.luogu.org/problemnew/show/P4106 https://www.lydsy.com/JudgeOnline/problem.php?id=3614 ...

  2. 前端PHP Session的实例

    登陆例子:(请注意一定要自己敲一遍,不要CV大法) 首先上一下成果图,激起同学们写的欲望,登录页如下:  点击登陆之后如下: 说明哦了,么问题.接下来自己实现一下. 首先数据库信息: 新建一个名为 l ...

  3. docker基于宿主机系统版本创建镜像

    这里讲如何定制自己centos镜像,仅供测试docker使用. A) 安装软件 yum -y install febootstrap B)下载镜像febootstrap -i bash -i wget ...

  4. 《Java多线程编程核心技术》读后感(十一)

    方法join的使用 在很多情况下,主线程创建并启动子线程,如果子线程中要进行大量的耗时运算,主线程往往将早于子线程结束之前结束.这时,如果主线程想等待子线程执行完之后再结束,比如子线程处理一个数据,主 ...

  5. POJ - 2955 Brackets括号匹配(区间dp)

    Brackets We give the following inductive definition of a “regular brackets” sequence: the empty sequ ...

  6. WordPress博客搭建指南

    WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统.WordPress具有插件架构和模板系统.Alexa排行前100万的网站中有超过16.7%的网站使用WordPre ...

  7. 查看 打包秘钥的 SHA1

    keytool -v -list -keystore C:\Users\XXX\.android\debug.keystore 输入密钥库口令: android android

  8. cordova之旅之初识

    emmmm, 一直徘徊在移动端采用什么技术比较好,一直也没有找到,让我为了一个移动端而去学习一波react全家桶是不现实的操作,反观自己的技术栈,通过长时间的对比和剖析找到了入口点,不管了先会写再说吧 ...

  9. 3DMAX 10 角色动作

    基本流程 1保存初始姿势(保存原始T动作) 2确定动画帧数时间 3找参考动作姿态,绘制关键帧草图 4先调整出初始姿势,如果是循环动画,需要把第一帧复制到最后一帧 5大体先想好在固定时间比例调草图的关键 ...

  10. Python学习笔记(数据处理)

    处理文件中数据 (统计分数) 看一下我们的文档里的数据: #-- scores.txt 刘备 23 35 44 47 51 关羽 60 77 68 张飞 97 99 89 91 诸葛亮 100 1.先 ...