AngularJS develops WebApp to achieve highlight jump button effect, how to use ui-sref and ui-sref-active

The highlighting effect of the menu bar at the bottom of WebApp needs to use a command. In fact, it also needs to do an interaction, that is, it needs to jump when clicked. In this case, ui is generally used. .router is an instruction of the routing module. There are generally two ways to jump. One is to use instructions to jump, and the other is to use services to jump.

The instruction is ui-sref, which is equivalent to binding a click event to this element. When this element is clicked, it will jump to the corresponding page or route.

When clicked at the same time, the button also needs to have a highlighting effect. This command is called 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>

routing

'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 file

@highlightBgColor: #dbf9f4;@highlightColor: #01c2a3;

  li {    font-size: 20px;
    width: 33.33%;
    color: @muteColor;
    &.select {      background-color: @highlightBgColor;
      color: @highlightColor;
    }
  }

The above is the detailed content of AngularJS develops WebApp to achieve highlight jump button effect, how to use ui-sref and ui-sref-active. For more information, please follow other related articles on the PHP Chinese website!