AngularJS开发WebApp高亮跳转按钮效果，ui-sref和ui-sref-active的使用

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;    }  }