Question

我正在使用Angular $ location.path（）来确定我博客上的路径，然后在导航栏上突出显示正在使用的路径。突出显示工作除了我想要在使用路径时更改突出显示的文本的颜色。在下面的CSS我试过使用：hover和：active来改变文本的颜色。当您将鼠标悬停在导航栏中的路径链接上时，颜色会发生变化，但是当您单击它时，最初会更改为我指定的颜色：活动但是当您移动鼠标时它会返回默认的活动颜色。有什么想法吗？谢谢。

HTML - NAVBAR

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

Answer 2

您正在将有效课程应用于li

<li ng-class="{ active: isActive('#/portfolio')}">

所以你应该有像这样的活跃类的样式

.navbar-default .navbar-nav > li.active > a

您的CSS行将是

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

导航栏的角度位置路径，无法更改颜色。

2 个答案: