AngularJS でハイライトジャンプボタン効果を実現する WebApp を開発、ui-sref と ui-sref-active の使い方

WebApp の下部にあるメニュー バーの強調表示効果にはコマンドも必要です。つまり、クリックされたときにジャンプする必要があります。ルータールーティングモジュールは一般的に 2 つの方法でジャンプします。1 つは命令を使用してジャンプする方法、もう 1 つはサービスを使用してジャンプする方法です。

コマンドは 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>

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

と呼ばれます。

以上がAngularJS でハイライトジャンプボタン効果を実現する WebApp を開発、ui-sref と ui-sref-active の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。