ui-sref-active="active" 在我的导航栏菜单中不起作用

Question

我有侧面导航菜单，当您将鼠标悬停在图像上时 link 从示例（imgOn 到 imgOff）发生变化。图片 link 到一个页面。问题是当我在导航菜单外单击时，图像不会保持活动状态。

CSS:

#icon-performance{content: url(../app/images/performance-white.png);}
#icon-performance:hover,
#icon-performance.focus{content: url(../app/images/performance-blue.png);}

#icon-overview{content: url(../app/images/overview-white.png);
#icon-overview:hover,
#icon-overview.focus{content: url(../app/images/overview-blue.png);}

#icon-audience{content: url(../app/images/audience-white.png);}
#icon-audience:hover,
#icon-audience.focus{content: url(../app/images/audience-blue.png);}

#icon-socialmedia{content: url(../app/images/socialmedia-white.png);}
#icon-socialmedia:hover,
#icon-socialmedia.focus{content: url(../app/images/socialmedia-blue.png);}

#icon-email{content: url(../app/images/email-white.png);}
#icon-email:hover,
#icon-email.focus{content: url(../app/images/email-blue.png);}'

使用 :focus 不起作用。

索引页：

<nav class="navbar navbar-fixed-top" role="navigation"> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav side-nav" > <li><a ui-sref-active="active" ui-sref="performance"><i id="icon-performance"></i><br>PERFORMANCE SNAPSHOT</a></li> <li><a ui-sref-active="active" ui-sref="overview"><i id="icon-overview"></i><br>OVERVIEW</a></li> <li><a ui-sref-active="active" ui-sref="audience"><i id="icon-audience"></i><br>AUDIENCE</a></li> <li><a ui-sref-active="active" ui-sref="socialMedia"><i id="icon-socialmedia"></i><br>SOCIAL MEDIA</a></li> <li><a ui-sref-active="active" ui-sref="emailCampaign"><i id="icon-email"></i><br>EMAIL CAMPAIGN</a></li> </ul> </div> </nav>

控制器：

app.config(function($stateProvider, $urlRouterProvider){

$urlRouterProvider.otherwise("/overview")

$stateProvider
    .state("overview", {
        url: "/overview",
        templateUrl: "partials/partialOverview.html"
    })
    .state('audience',{
        url: "/audience",
        templateUrl: "partials/partialAudience.html"
    })
    .state('socialmedia',{
        url: "/socialmedia",
        templateUrl: "partials/partialSocialMedia.html"
    })
    .state('emailcampaign',{
        url: "/EmailCampaign",
        templateUrl: "partials/partialEmailCampaign.html"
    })
    .state("performance", {
        url: "/Performance",
        templateUrl: "partials/partialPerformance.html"
    })
});})();

Answer 1

您不能使用 :focus 执行此操作。 CSS 焦点选择器仅适用于表单输入和超链接。您需要使用 JavaScript.

来执行此操作

Angular 单击时焦点 class 切换的示例：

<img ng-class="{focus: hasFocus}" ng-click="hasFocus = !hasFocus">

CSS:

#icon-performance{
    content: url(../app/images/performance-white.png);
}

#icon-performance:hover,
#icon-performance.focus{
    content: url(../app/images/performance-blue.png);
}

Answer 2

想通了。

HTML:

<li><a ui-sref-active="active" ui-sref="performance"><i id="icon-performance"></i><br>PERFORMANCE SNAPSHOT</a></li>

CSS:

.nav > li > .active #icon-performance{content: url(../app/images/performance-blue.png);}

将此应用于所有导航图像。

ui-sref-active="active" 在我的导航栏菜单中不起作用

ui-sref-active="active" not working in my navbar menu

css

controller

css-selectors

angularjs