html - 导航栏的 Angular 位置路径，无法更改颜色。

Question

我正在使用 Angular $location.path() 来确定我博客上的路径，然后在导航栏上突出显示正在使用的路径。突出显示有效，除了我想在使用路径时更改突出显示文本的颜色。在下面的 CSS 中，我尝试使用 :hover 和 :active 来改变文本的颜色。当您将鼠标悬停在导航栏中的路径链接上时，颜色会发生变化，但是当您单击它时，它最初会更改为我使用 :active 分配的颜色，但是当您移动鼠标时，它会恢复为默认的事件颜色。有什么想法吗？谢谢。

HTML - 导航栏

<div ng-controller='NavbarCtrl'>
     <div class="navbar navbar-default" role="navigation" id='navbar'>
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id='headerTitle' class="navbar-brand" ng-href="#/">Teewinot</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li ng-class="{ active: isActive('#/portfolio')}"><a class='navSubHeadings' ng-href="#/portfolio">Portfolio</a></li>
                    <li ng-class="{ active: isActive('#/philosophy')}"><a class='navSubHeadings' ng-href="#/philosophy">Philosophy</a></li>
                    <li ng-class="{ active: isActive('#/about')}"><a class='navSubHeadings' ng-href="#/about">About The Partners</a></li>
                    <li ng-class="{ active: isActive('#/teewinot-blog')}"><a class='navSubHeadings' ng-href="#/teewinot-blog">Blog</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Controller

angular.module('Teewinot').controller('NavbarCtrl', function($scope,    $location) {
  'use strict'

  $scope.isActive = function (viewLocation) {
      return viewLocation === $location.path();
  };
});

CSS

.navbar-default .navbar-nav > li > a {
  color: red;
}
.navbar-default .navbar-nav > li > a:hover {
  color: yellow;
}
.navbar-default .navbar-nav > li > a:active {
  color: yellow;
}

Answer 1

我认为您需要从对 $scope.isActive 的调用中删除散列 #。

isActive('#/portfolio')

尝试将它们更改为

isActive('/portfolio')