高亮当前页面导航项答案

【问题标题】：Highlight current page navigation item高亮当前页面导航项
【发布时间】：2023-03-06 00:48:01
【问题描述】：

我的网站上有一个浮动页面导航列表。它具有页面的所有标题，用户可以轻松地单击页面导航项以转到页面的正确锚点。它还有助于让访问者了解页面结构，并知道他/她在页面上的位置。

现在，为了帮助用户了解他/她在页面上的位置，我希望页面导航列表中的正确项目能够根据用户的位置突出显示（添加/删除 CSS 类）。

我希望我已经很好地解释了自己。这是怎么做到的？谢谢！

- 编辑-

感谢塔尔加特的回答。我现在有这个代码：

<body ng-app="myApp">

这是我的控制器：

<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("validateCtrl", function($scope) {
    $scope.isActive = {};
    $scope.isActive = function (state) {
        return state === $state.current.name;
    };
});
</script>

这是从导航列表到我们提供的名为“祖先冒险”的游览之一的锚链接：

<a href="#ancestral-adventure" ng-class="{active: isActive('ancestral-adventure')}">Ancestral Adventure</a>

"ancestral-adventure" 是标头的 id。不过，也许我应该用这个 id 将“祖传历险记”内容包装在一个 div 中？这是标题：

<h3 id="ancestral-adventure" name="ancestral-adventure">Ancestral Adventure</h3>

正如您在$state.current.name 中提到的name 的角度代码，为了安全起见，我也在标题中添加了具有相同值的名称和ng-name。

使用此代码，导航列表项不会更新 - 没有任何反应。我已确保 active 类适用于列表项，并且 AngularJS 库正在运行。我可能做错了什么？谢谢！

【问题讨论】：

点击是否会导致 URL 中的哈希部分（或片段部分，# 之后的部分）更新？然后你可以使用:target（结合animation）。
或者您是否只想突出显示导航列表中的项目而不是页面上的实际部分？
感谢您的评论，Xufox。是的，我希望突出显示导航列表项 - 而不是页面内容本身的部分。

标签： javascript css angularjs

【解决方案1】：

所以据我了解，您想创建类似 bootstrap ScrollSpy 的东西它需要根据标题元素位置计算垂直滚动位置。您可以尝试使用其中一种滚动间谍实现来实现 Angular。谷歌的两个第一批结果：

【讨论】：

【解决方案2】：

您可以使用$state 服务来检查当前导航项是否处于活动状态。这里有一些例子来实现这一点。将以下代码添加到您的控制器：

$scope.isActive = function (state) {
  return state === $state.current.name;
};

并将其添加到模板中：

<ul class="nav">
  <li ng-class="{active: isActive('route-name')}">
  </li>
</ul>

如果当前项目处于活动状态，active: isActive('route-name') 会将 active 类分配给 li 标签，然后您可以使用 css 突出显示该项目。

【讨论】：

感谢您的回答，塔尔加特！这是我继续学习 AngularJS 的绝佳机会。我刚开始学习这个，所以我是一个真正的新手。我已经用我当前的代码更新了问题。