Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
33
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: 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;
}

More From » html

 Answers
2

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/


[#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.
reesel

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

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