Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  37] [ 4]  / answers: 1 / hits: 14855  / 10 Years ago, sun, march 30, 2014, 12:00:00

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

<div ng-show=tab == 2>

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

More From » html


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:

[#46428] Saturday, March 29, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 345
Total Questions: 124
Total Answers: 119

Location: Trinidad and Tobago
Member since Thu, Dec 1, 2022
2 Years ago