angularjs实现导航菜单切换高亮
<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实现导航菜单切换高亮的更多相关文章
- Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. ...
- 织梦一二级导航菜单被点击顶级栏目高亮(加class)解决方法
织梦一二级导航菜单被点击的栏目高亮显示方法详解,废话不多说直接举例说明: 织梦一级菜单被点击栏目高亮调用方法: {dede:channel typeid ='1' type ='son' curre ...
- Angular+Bootstrap3导航菜单
Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...
- 仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...
- js实现当前导航菜单高亮显示
为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...
- Android 抽屉效果的导航菜单实现
Android 抽屉效果的导航菜单实现 抽屉效果的导航菜单 看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而 ...
- DDD开发框架ABP之导航菜单
每一个网站都会有导航菜单(通常不止一个),ASP.NET Boilerplate(后文简称ABP)提供了一种创建和使用菜单的通用架构,利用架构我们可以方便的创建菜单并显示给用户.本文主要说明菜单的创建 ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- JQUERY 插件开发——MENU(导航菜单)
JQUERY 插件开发——MENU(导航菜单) 故事背景:由于最近太忙了,已经很久没有写jquery插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...
随机推荐
- 洛谷 P4106 / bzoj 3614 [ HEOI 2014 ] 逻辑翻译 —— 思路+递归
题目:https://www.luogu.org/problemnew/show/P4106 https://www.lydsy.com/JudgeOnline/problem.php?id=3614 ...
- 前端PHP Session的实例
登陆例子:(请注意一定要自己敲一遍,不要CV大法) 首先上一下成果图,激起同学们写的欲望,登录页如下: 点击登陆之后如下: 说明哦了,么问题.接下来自己实现一下. 首先数据库信息: 新建一个名为 l ...
- docker基于宿主机系统版本创建镜像
这里讲如何定制自己centos镜像,仅供测试docker使用. A) 安装软件 yum -y install febootstrap B)下载镜像febootstrap -i bash -i wget ...
- 《Java多线程编程核心技术》读后感(十一)
方法join的使用 在很多情况下,主线程创建并启动子线程,如果子线程中要进行大量的耗时运算,主线程往往将早于子线程结束之前结束.这时,如果主线程想等待子线程执行完之后再结束,比如子线程处理一个数据,主 ...
- POJ - 2955 Brackets括号匹配(区间dp)
Brackets We give the following inductive definition of a “regular brackets” sequence: the empty sequ ...
- WordPress博客搭建指南
WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统.WordPress具有插件架构和模板系统.Alexa排行前100万的网站中有超过16.7%的网站使用WordPre ...
- 查看 打包秘钥的 SHA1
keytool -v -list -keystore C:\Users\XXX\.android\debug.keystore 输入密钥库口令: android android
- cordova之旅之初识
emmmm, 一直徘徊在移动端采用什么技术比较好,一直也没有找到,让我为了一个移动端而去学习一波react全家桶是不现实的操作,反观自己的技术栈,通过长时间的对比和剖析找到了入口点,不管了先会写再说吧 ...
- 3DMAX 10 角色动作
基本流程 1保存初始姿势(保存原始T动作) 2确定动画帧数时间 3找参考动作姿态,绘制关键帧草图 4先调整出初始姿势,如果是循环动画,需要把第一帧复制到最后一帧 5大体先想好在固定时间比例调草图的关键 ...
- Python学习笔记(数据处理)
处理文件中数据 (统计分数) 看一下我们的文档里的数据: #-- scores.txt 刘备 23 35 44 47 51 关羽 60 77 68 张飞 97 99 89 91 诸葛亮 100 1.先 ...