javascript - 在 HTML 中突出显示事件按钮

Question

我有一个关于 HTML 和样式的新手问题。我的 HTML/JS 代码目前的工作原理是单击的“按钮”保持某种颜色(浅蓝色)，以便用户知道正在显示哪个页面:

但是，它看起来很笨重，因为我将逻辑(尽管是 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 类