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插件开发系列了.但是凭着自己对这方面的爱好,我还是抽了一些时间来过一下插件瘾的.今天的主题是导航菜单 ...
随机推荐
- 前端PHP Session的实例
登陆例子:(请注意一定要自己敲一遍,不要CV大法) 首先上一下成果图,激起同学们写的欲望,登录页如下: 点击登陆之后如下: 说明哦了,么问题.接下来自己实现一下. 首先数据库信息: 新建一个名为 l ...
- hive 面试题
使用 Hive或者自定义 MR 实现如下逻辑 product_no lac_id moment start_time user_id county_id staytime city_id 134291 ...
- jsonp实现数据跨域请求
1.我们知道,哪怕跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的. 远程服务器remoteserver.com根目录下有个remote.js文件代码如下: al ...
- Ubuntu 12.04搭建hadoop单机版环境
前言: 本文章是转载的,自己又加上了一些自己的笔记整理的 详细地址请查看Ubuntu 12.04搭建hadoop单机版环境 Hadoop的三种运行模式 独立模式:无需任何守护进程,所有程序都在单个JV ...
- js学习笔记2:循环和try/catch/throw
今天学习了js的比较.if/else.switch/case和各种循环,这些东西每种语言都大同小异,没什么好看的,重点说一下js的循环. JavaScript 支持不同类型的循环: for - 循环代 ...
- update-alternatives --Install
up vote 1 down vote favorite I typed: sudo update-alternatives --install "/usr/bin/java" & ...
- 安装coreseek 编译错误
Ubuntu下 编译csft 报错fatal error python.h no such file or directory 执行apt-get install python-dev即可
- CSS 绝对定位与相对定位的区别
设置为绝对定位的元素框从文档流完全删除, 并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块. 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样. 元素定位后生成一 ...
- Silhouette-Outlined Diffuse
http://wiki.unity3d.com/index.php/Silhouette-Outlined_Diffuse A variant of Outlined Diffuse 3 showin ...
- Spark history server 遇到的一些问题
最近学习Spark,看了一个视频,里面有提到启动spark后,一般都会启动Spark History Server.视频里把 spark.history.fs.logDirectory 设置成了Had ...