在AngularJS中单击更改div背景颜色答案

【问题标题】：Changing div background color on click in AngularJS在AngularJS中单击更改div背景颜色
【发布时间】：2014-05-09 22:23:30
【问题描述】：

我正在使用 AngularJS 在我的网页中创建标签。单击（选择）选项卡时如何更改选项卡的背景颜色？

可以在以下位置找到此代码的 JSFiddle：http://jsfiddle.net/x8xfM/2/ 比如点击tab1，它变成红色，点击tab2，tab1又变黑，tab2背景变成红色。

<div  ng-app ng-controller="sample" ng-init="tab=1">

        <div class="cb" ng-click="tab = 1">tab 1</div>
        <div class="cb" ng-click="tab = 2">tab 2</div>

        <div ng-show="tab == 1">
            <p>first</p>
         </div>

        <div ng-show="tab == 2">
            <p>second</p>
        </div>
</div>

.cb {    
    list-style: none;
    padding: 10px;
    display:inline-block;
    background-color: #000;  
    color: #FFF;
    border: 1px solid black;
    border-radius: 5px;
}
.cb:hover{
    background-color: #4a4a4a; 
    color: #FFF;
}

【问题讨论】：

您可以在单击活动选项卡时添加一个类。
怎么办？

标签： javascript html css angularjs

【解决方案1】：

为了那些可能从谷歌偶然发现的人的利益：

使用ng-class 指令。这是使用上述示例的 jsfiddle：http://jsfiddle.net/x8xfM/43/

【讨论】：

我用它来实现按钮作为“单选”按钮。非常有用，谢谢。