我有一个 Bootstrap 实现,其中导航栏是一个无序列表,每个项目都设置为在事件时突出显示。突出显示本身使用 CSS 设置样式,但使用 AngularJS 检查事件状态:
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active: isActive('/blog')}">
<a onClick="pagetop()" href="#blog">BLOG</a>
</li>
</ul>
isActive()
方法在 AngularJS Controller 中定义为:
function HeaderController($scope, $location){
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
}
如你所见,AngularJS 只是添加了一个 .active
类到 <li>
项目(如果链接的 URL 处于事件状态)。这是使用 CSS 设计样式的类。当当前打开的页面为 http://localhost:8888/a-s/#/blog/ 时,此功能正常工作。 但当它是 http://localhost:8888/a-s/#/blog/sub-page/ 时则不然 或 http://localhost:8888/a-s/#/blog/sub-page/sub-sub-page/ 。如何修改代码以确保 /blog 下的所有路径触发 .active
类逻辑?有什么方法可以在此语法中使用通配符吗?
最佳答案
现在检查路径和传递的值是否相等,而是检查传递的值是否存在于路径中
function HeaderController($scope, $location) {
$scope.isActive = function(viewLocation) {
return $location.path().indexOf(viewLocation) > -1;
};
}
关于javascript - 包括 JavaScript 中动态创建的子页面 "isActive()",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35283697/