Question

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

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

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

- 编辑 -

感谢Talgat的回答。我现在有了这段代码：

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

这是从导航列表到我们提供的其中一个名为＆＃34;祖先冒险＆＃34;

的旅行的锚点链接

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

＆＃34;祖先冒险＆＃34;是标题的id。也许我应该将这个＆＃34;祖先冒险＆＃34; -content包含在div中而不是这个id？这是标题：

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

由于您的角度代码在name中提及了$state.current.name，我还为标题添加了一个名称和名称相同的ng-name，以确保安全。

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

Answer 1

您可以使用$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突出显示该项目。

Answer 2

所以从我的理解你想要创建像bootstrap ScrollSpy 它需要针对标题元素位置计算垂直滚动位置。您可以尝试使用其中一个滚动间谍实现角度。谷歌的两个第一个结果：

突出显示当前页面导航项

2 个答案: