WebApp底部菜单栏的高亮效果需要用到一个指令,其实还需要做一个交互,就是点击的时候需要跳转,像这种情况一般会用到ui.router路由模块的一个指令,跳转一般有两种方法,一种是使用指令进行跳转,一种是利用服务进行跳转。
指令是ui-sref,这相当于给这个元素绑定一个点击事件,当这个元素被点击的时候,它就会跳转到对应的页面或者是路由。
同时被点击的时候,按钮还需要有个高亮的效果,这个指令叫做ui-sref-active=”select”
html
<ul class="bg-w foot">
<li ui-sref-active="select" ui-sref="main"><span>首页</span></li>
//这个意思是说如果当前点击的路由是main的话,首先点击这个路由会跳转到main的页面,
//然后如果当前页面就是它的话,那么就会包含select这个样式类的名称
<li ui-sref-active="select" ui-sref="search"><span>附近</span></li>
<li ui-sref-active="select" ui-sref="me"><span>我</span></li>
</ul>
路由
'use strict';
angular.module('app').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider.state('main', {
url: '/main',
templateUrl: 'view/main.html',
controller: 'mainCtrl'
});
$urlRouterProvider.otherwise('main');
}])
.Less文件
@highlightBgColor: #dbf9f4;
@highlightColor: #01c2a3;
li {
font-size: 20px;
width: 33.33%;
color: @muteColor;
&.select {
background-color: @highlightBgColor;
color: @highlightColor;
}
}