我有一个关于 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 类。我觉得我想多了。
最佳答案
我使用以下方法完成了此操作:
头文件:
<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
类
关于javascript - 在 HTML 中突出显示事件按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31147375/