AngularJS는 하이라이트 점프 버튼 효과를 달성하기 위해 WebApp을 개발하고 ui-sref 및 ui-sref-active를 사용하는 방법

一个新手
풀어 주다: 2017-09-23 09:39:06
원래의
1888명이 탐색했습니다.

AngularJS는 하이라이트 점프 버튼 효과를 달성하기 위해 WebApp을 개발하고 ui-sref 및 ui-sref-active를 사용하는 방법

웹앱 하단 메뉴 표시줄의 강조 효과는 실제로 상호작용도 해야 합니다. 즉, 이 경우에는 다음 명령을 사용해야 합니다. 일반적으로 ui.router 라우팅 모듈이 사용됩니다. 점프에는 일반적으로 두 가지 방법이 있습니다. 하나는 명령어를 사용하여 점프하는 것이고, 다른 하나는 서비스를 사용하여 점프하는 것입니다.

명령은 ui-sref이며, 이 요소를 클릭하면 해당 페이지나 경로로 이동합니다.

동시에 클릭하면 버튼에도 강조 효과가 있어야 합니다. 이 명령은 ui-sref-active=”select”

html

  • 首页
  • //这个意思是说如果当前点击的路由是main的话,首先点击这个路由会跳转到main的页面, //然后如果当前页面就是它的话,那么就会包含select这个样式类的名称
  • 附近
로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!