Question

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

我想在angularjs或css中有一些神奇的方法已经完成，但我似乎无法找到。

我的菜单如下：

＆＃13;

<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/>

＆＃13;

我的css看起来像：

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

您可以使用https://docs.angularjs.org/api/ngRoute/service/ $ route服务来获取/检测当前路由，并在class或li标记中设置一些a，然后使用css为其设置样式在你设定的课程上。

改变当前页面angularjs的颜色

2 个答案: