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

Posted 2023-03-05

【中文标题】活动时的角度工具栏导航文本颜色

【英文标题】：Angular toolbar nav text color when active

【发布时间】：2021-09-30 11:30:28

【问题描述】：

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

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

【问题讨论】：

焦点不起作用的原因是，当您单击其他地方时，会触发模糊事件并移除焦点事件。您可能应该将选择的导航标题和选择的导航子项保存在某处。这样你就可以添加一个selected 类来实现选择颜色

当我点击某处文本颜色消失时，:active 出现同样的问题

***.com/a/31178770/8018837我想你可以在这里找到答案

谢谢我会照顾它

【参考方案1】：

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

管理员有链接 /admin 用户有链接 /admin/users 日志有链接 /admin/logs

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

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

参考：SO:how-to-highlight-a-current-menu-item