I am using AngularJS to create tabs in my web page. How can I change the background color of the tab when it is clicked (selected) ?

A JSFiddle for this code can be found at: / So for example, on clicking tab1, it bees red in color, and when tab2 is clicked, tab1 goes black again and tab2 background color bees red.

<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;
}

I am using AngularJS to create tabs in my web page. How can I change the background color of the tab when it is clicked (selected) ?

A JSFiddle for this code can be found at: http://jsfiddle/x8xfM/2/ So for example, on clicking tab1, it bees red in color, and when tab2 is clicked, tab1 goes black again and tab2 background color bees red.

<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

• You could add a class to the active tab when it's clicked. – Seiyria Commented Mar 30, 2014 at 17:10
• how can that be done ? – krammer Commented Mar 30, 2014 at 17:10

1 Answer 1

For the benefit of someone who might stumble across this from google:

Use the ng-class directive. Here's a jsfiddle using the above example: http://jsfiddle/x8xfM/43/