更改当前页面angularjs的颜色答案

【问题标题】：change color of current page angularjs更改当前页面angularjs的颜色
【发布时间】：2015-08-18 12:26:26
【问题描述】：

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

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

【问题讨论】：

你在用jQuery吗？
不，我正在使用 angularjs

标签： javascript jquery html css angularjs

【解决方案1】：

看起来你有函数 person(), product()。使用getElementsByName('body').style.backgroundColor = 'red'; 和各自函数中的各自颜色设置背景颜色。

【讨论】：

我猜应该是 getElementsByName('body').style.backgroundColor = 'red';。

【解决方案2】：

您可以使用https://docs.angularjs.org/api/ngRoute/service/$route 服务来获取/检测当前路线，并在您的li 或a 标签中设置一些class，然后使用css 根据您设置的类来设置它们的样式。

【讨论】：