2

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.net/x8xfM/2/ So for example, on clicking tab1, it becomes red in color, and when tab2 is clicked, tab1 goes black again and tab2 background color becomes 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;
}
2
  • You could add a class to the active tab when it's clicked. Commented Mar 30, 2014 at 17:10
  • how can that be done ? Commented Mar 30, 2014 at 17:10

1 Answer 1

6

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.net/x8xfM/43/

Sign up to request clarification or add additional context in comments.

1 Comment

I used this to implement buttons acting as 'radio' buttons. Very useful thank you.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.