活动时的角度工具栏导航文本颜色答案

【问题标题】：Angular toolbar nav text color when active活动时的角度工具栏导航文本颜色
【发布时间】：2021-09-30 11:30:28
【问题描述】：

我有一个带有 3 个菜单项的工具栏，我想实现这一点，如果我点击其中一个，文本会改变它的颜色。我最接近实现这一点的是我在css中使用了focus，但这不是最好的，因为如果我点击其他地方它就消失了。有没有可能的方法来实现这一点？

在我点击另一个菜单项之前，管理员也应该是绿色的，例如时间管理。

【问题讨论】：

焦点不起作用的原因是，当您单击其他地方时，会触发模糊事件并移除焦点事件。您可能应该将选择的导航标题和选择的导航子项保存在某处。这样你就可以添加一个selected 类来实现选择颜色
当我点击某处文本颜色消失时，:active 出现同样的问题
stackoverflow.com/a/31178770/8018837我想你可以在这里找到答案
谢谢我会照顾它

【解决方案1】：

如果您遵循 url 的模式，那么它是可能的例如

然后在您的导航栏中使用 ng-class="getClass('/admin')"。然后你可以使用类似下面的函数

$scope.getClass = function (path) {
  return ($location.path().substr(0, path.length) === path) ? 'active' : '';
}

【讨论】：