我正在尝试修改已构建的元素，以便在每个页面上都有一个子菜单，但只编码一次。 我希望能够为您当前正在查看的页面的链接添加突出显示，但我必须在一个 html 片段中完成所有这些操作 该列表呈现良好，只是我无法突出显示当前页面。 我已经阅读了一些关于在单独的文件中添加“当前链接”格式的其他帖子，但不幸的是，我必须在这个片段中包含所有代码。我必须通过使用 HTML、CSS 和 Angular 来完成，我是新来的学习 Angular
鉴于此，我正在尝试实现的目标是否可行？如果是，我该如何实现？
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;
}
.left {
float: left;
}
<body ng-app="watch">
<div ng-controller="control">
<ul>
<li><a href="#" ng-click = "person()" id="bl">Person</a></li>
<li><a href="#" ng-click = "product()" id="or">Product</a></li>
<li><a href="#" ng-click = "place()" id="gr">Place</a></li>
</ul>
</div>
</body>'use strict';
var mymodule = angular.module("watch", []);
mymodule.controller("control",function($scope) {
$scope.jsonerator = true;
$scope.jsonerator2 = false;
$scope.jsonerator3 = false;
$scope.person = function() {
$scope.jsonerator = true;
$scope.jsonerator2 = false;
$scope.jsonerator3 = false;
}
$scope.product = function() {
$scope.jsonerator = false;
$scope.jsonerator2 = true;
$scope.jsonerator3 = false;
}
$scope.place = function() {
$scope.jsonerator = false;
$scope.jsonerator2 = false;
$scope.jsonerator3 = true;
}
};
这是我在 jsfiddle 上的菜单:jsfiddle
谢谢
最佳答案
这是我的建议，除了将您的 CSS ID 更改为类(并且可能从您的 a 标签中删除 ID)。您可能还会发现使用 ng-class 不需要那么多代码;当冒号后的 bool 语句为真时，它将应用该类。在这种情况下，我们使用您的 jsonerator $scope 变量。
<li><a href="#" ng-click = "person()" id="bl" ng-class="{bl: jsonerator}">Person</a></li>
<li><a href="#" ng-click = "product()" id="or" ng-class="{or: jsonerator2}">Product</a></li>
<li><a href="#" ng-click = "place()" id="gr" ng-class="{gr: jsonerator3}">Place</a></li>
关于javascript - 更改颜色当前链接页面 Angular 和CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30675965/