Question

我正在使用缩小版的UI-Router。我有两个使用UI-Router设置的路由。这些路由的链接嵌套在Bootstrap导航栏中。

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

我使用UI-Router指令ui-sref-active或ui-sref-active-eq来更改活动链接的样式。我想保持一致并使用其中一个指令，因为我使用UI-Router作为路由本身。我知道如何使用传统的Angular方式更改元素的类。

我为该指令定义了一个CSS类：

.active {
   background-color: red;
}

这在一定程度上起作用，但有一些奇怪的行为。首次加载页面时，将选择默认路径并在其后面显示红色背景。将鼠标悬停在突出显示的元素上或单击它时，红色背景将消失。我尝试将.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：http://plnkr.co/edit/YLBnxHKTzjPdTNFFZB52?p=preview

Answer 1

导致这种奇怪行为的问题是因为您使用Bootstrap Design作为导航栏。并且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>

覆盖active类的css：

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

这是工作plunker

UI-Router更改活动路由器样式

1 个答案: