突出显示当前页面导航项目

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

现在，为了帮助用户了解他/她在哪里，我希望页面导航列表中的正确项目能够根据用户位置突出显示（添加/删除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>

这是从导航列表中我们提供所谓的“祖传冒险”旅游团的一个锚链接：

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

“祖先冒险”是头的标识。但是，也许我应该把这个“祖先冒险”内容包裹在一个div中，而不是用这个id来包装呢？这是标题：

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

当你的角码$state.current.name提到name，我添加了一个名字和NG-名以相同价值的标题为好，以防万一。

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

来源

2015-05-09 Marcus Edensky

是否点击造成的散列部分（或片段部分，''＃后的部分）的URL进行更新？然后你可以使用['：target']（https://developer.mozilla.org/en/docs/Web/CSS/:target）（与'animation'结合使用）。 – Xufox

或者您是否只想突出显示导航列表中的项目而不是页面上的实际部分？ – Xufox

感谢您的评论，Xufox。是的，我希望导航列表项目突出显示 - 而不是页面内容本身的部分。 –

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

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

，并在templete补充一点：

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

的active: isActive('route-name')将active类分配给li标签，如果当前项目是活动的，那么你可以突出显示该项目CSS。

来源

2015-05-09 04:28:59

谢谢你的回答，Talgat！这是我继续学习AngularJS的绝佳机会。我刚开始学习这个，所以我是一个真正的新手。我用当前的代码更新了问题。 –

所以从我所了解的你想创建像引导ScrollSpy 它需要计算垂直滚动位置对头元素位置。您可以尝试使用滚动间谍实现中的一种角度。二是从谷歌的结果：

来源

2015-05-09 16:44:03

突出显示当前页面导航项目

回答

相关问题