Angularjs UI路由器更改活动路由器样式

我使用的是UI路由器的缩小版。我用UI路由器设置了几个路由。指向这些路由的链接嵌套在引导导航栏中

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#navbar" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </div>
        <a class="navbar-brand" href="#">App Brand</a>

        <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav">
                <li><a ui-sref-active="active" ui-sref="route1">Route 1</a></li>
                <li><a ui-sref="route2" ui-sref-active="active">Route 2</a></li>
            </ul>
        </div>
    </div>
</nav>

这在一定程度上是有效的，但有一些奇怪的行为。首次加载页面时，将选择默认路由，并在其后面显示红色背景。将鼠标悬停在高亮显示的元素上或单击该元素时，红色背景将消失。我尝试将

.active:focus、.active:hover

添加为CSS类，但没有成功。我也尝试过更改类名，看看这样做是否有用，但没有

这可能是无用的，但我有这样配置的路由：

(function() {
    angular
        .module('App)
        .config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
            $urlRouterProvider) {
                $urlRouterProvider.otherwise('/route1');

                $stateProvider
                    .state('route1', {
                        url: '/route1',
                        templateUrl: '../client/views/route1.html'
                    })
                    .state('route2', {
                        url: '/route2',
                        templateUrl: '../client/views/route2.html'
                    });
            }]);
})();

为什么我会有这些奇怪的行为

编辑：

---

我创建了一个Plunk:

导致这种奇怪行为的问题是因为您正在使用导航栏的引导设计。Bootstrap使用了

active

作为您正在使用的相同行为的类名。
您需要覆盖活动类上的css以解决此问题。
以下是我为实现您的目标所做的修改：

将

ui-sref-active=“active”ui-sref=“route1”

移动到

li

标记

<div class="collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav">
        <li ui-sref-active="active" ui-sref="route1"><a>Route1</a></li>
        <li ui-sref-active="active" ui-sref="route2"><a>Route2</a></li>
    </ul>
</div>

---

这是工作报告

是的，我刚刚做了，没有用。在单击元素本身后单击元素外部时，背景色会出现。您可以创建JSFIDLE链接吗？另外，您有两个状态同时处于活动状态？我创建了一个plnk:。不，两个状态不应该同时处于活动状态。很好！那么您希望高亮显示元素保持红色，而不是非活动选项卡？对吧?对。我只希望活动路由的链接具有红色背景，并在其活动时保持红色。

<div class="collapse navbar-collapse" id="navbar">
    <ul class="nav navbar-nav">
        <li ui-sref-active="active" ui-sref="route1"><a>Route1</a></li>
        <li ui-sref-active="active" ui-sref="route2"><a>Route2</a></li>
    </ul>
</div>

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    background:red;
}