突出显示HTML中的活动按钮

Question

我有关于HTML和样式的新手问题。我的HTML / JS代码目前适用于点击的＆＃34;按钮＆＃34;保持某种颜色（浅蓝色），以便用户知道正在显示哪个页面：

然而，它似乎很笨重，因为我将逻辑（尽管是UI逻辑）放在DOM元素中。我在UI样式方面有足够的新意，不知道这是否正确。这是这些事情应该如何完成的？这是我的实施：

CSS：

.navBar a:hover {
        background: #F0F5F5;
    }

.navBar a.active {
        background: #D6EBFF;
    }

HTML：

<div class="navBar" style="display:inline; float:right; margin-top:30px; margin-right:30px">
  <ul>
    <li><a ng-class="{'active' : activePage === 'main'}" ng-click="activePage = 'main'" href="#/main">Main</a></li>
    <li><a ng-class="{'active' : activePage === 'recipes'}" ng-click="activePage = 'recipes'" href="#/recipes">Recipes</a></li>
  </ul>
</div>

单击链接时，将设置字符串文字，然后根据该字符串文字使用CSS类。我觉得我在想这个。

Answer 1

我使用以下方法完成了此操作：

标题文件：

<a href="#/home" data-ng-class="{ active : activeController == 'HomeCtrl' }">Home</a>

App.js

app.run(function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function(ev,data) {

        if (data.$$route && data.$$route.controller) {
            $rootScope.activeController = data.$$route.controller;
        }
    });
});

这将在路径更改发生时在根范围内创建变量activeController，然后使用该变量设置active类

Answer 2

拥有$rootScope.links数组，其中的每个项目都是您网站上各个网页的对象。因此：

[{name: 'Home', URL: 'home', order: 1}, {name: 'Recipes', URL: 'recipes', order: 2}, ...]

HTML：

<ul>
    <li ng-repeat="link in links | orderBy:order" ng-class={{'active': activePath === link.path}}>
        <a ng-href="#!/{{link.path}}">{{link.name}}</a>
    </li>
</ul>

在你的剧本中：

.run(function ($location, $rootScope) {
    $rootScope.activePath = '';

    $rootScope.$on('$routeChangeSuccess', function () {
        var pathArray = $location.path().split('/');

        $rootScope.activePath = pathArray[1];
    });
});