css - AngularJS:通过单击另一个按钮更改 CSS

Question

我有 3 个按钮“主页”、“关于”和“联系方式”。在页面加载时，我只希望“主页”按钮处于事件状态。单击“关于”按钮后，只有“关于”按钮应处于事件状态，其余 2 个按钮不活动。同样，点击“联系”按钮后，只有“联系”按钮处于事件状态，其余 2 个按钮不处于事件状态。

此处的“事件”一词表示具有不同 CSS 的按钮(与其他 2 个按钮相比)。我使用 AngularJS 作为我的前端 JS。

Answer 1

您需要阅读 Angular 的文档 ngClass directive .

使用 ngClass，您可以将 css 类绑定(bind)到 View 中的变量。

假设您在 $scope 上设置了 page。

JS(在你的 Angular Controller 内)

$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>