更改当前页面的颜色angularjs

Question

AngularJS是否以任何方式帮助在当前页面的链接上设置活动类别？

我想在angularjs或css中有一些不可思议的方式，但我似乎无法找到。

我的菜单看起来像：

<ul> 
 
<li ><a href="#/person" ng-click = "person()" id="bl" >Person</a></li> 
 
<li><a href="#/product" ng-click = "product()" id="or" >Product</a></li> 
 
<li ><a href="#/place" ng-click = "place()" id="gr" >Place</a></li> 
 
</ul><br/><br/>

我的CSS是这样的：

body { 
 
font-family: Source Sans Pro; 
 
} 
 

 
ul { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style-type: none; 
 
} 
 

 

 
a{ 
 
    float: left; 
 
    width: 6em; 
 
    text-decoration: none; 
 
    padding: 0.2em 0.6em; 
 
    border-right: 1px solid white; 
 
\t 
 
} 
 

 
#navbar li a.current { 
 
background-color: #FFF;} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
#bl { 
 
background-color:#5a5a5a; 
 
color: yellow; 
 
} 
 

 
#or { 
 
background-color:#5a5a5a; 
 
color: yellow; 
 
} 
 

 
#gr { 
 
background-color : #5a5a5a; 
 
color: yellow; 
 
} 
 

 
#bl:hover ,#or:hover , #gr:hover { 
 
background-color:#ff6900; 
 
} 
 
    
 
#persons{ 
 
float:left; 
 
} 
 
    
 
.left{ 
 
float:left; 
 
} 
 

Answer 1

看起来你有功能的人（），product（）。使用getElementsByName('body').style.backgroundColor = 'red';和相应功能中的相应颜色设置背景色。

Answer 2

你可以使用https://docs.angularjs.org/api/ngRoute/service/ $航线的获取/检测当前的路由，并设置一些class在li或a标签，然后用CSS根据您设置的类样式。