我有3个按钮“主页”,“关于”和“联系”。在页面加载时,我只希望激活“主页”按钮。单击“关于”按钮后,只有“关于”按钮应处于活动状态,其余2个按钮则不处于活动状态。同样,单击“联系人”按钮后,仅“联系人”按钮应处于活动状态,其余2个按钮则不处于活动状态。
这里的“活动”一词表示该按钮具有不同的CSS(与其他2个按钮相比)。我将AngularJS用作前端JS。
最佳答案
您将需要阅读有关Angular ngClass directive的文档。
使用ngClass
,可以将CSS类绑定到视图中的变量。
假设您在page
上设置了$scope
。
JS(在您的角度控制器内部)
$scope.page = 'home';
的HTML
<li ng-class="{'active': page == 'home'}" ng-click="page = 'home'">Home</li>
的CSS
<style type="text/css">
.active {
background: blue;
}
</style>