带背景图片问题的切换类

Question

i have a div with an id that i want to use for switchin between 2 classes. the purpose is to change class when i click showing a different background-image (inside, infact, in the second class). the div comes with a class default

 <a href="#"><div id="equipment" class="flash"> </div></a>

this is the css

 #equipment {

float: right;
margin-right: 30px;
width: 55px;
height: 81px;

 }
   .flash {


background: url('equipment.jpg');
background-size: 55px 81px;
background-repeat: no-repeat;
     }


.flashOn {



background: url ('equipment3.jpg')  no-repeat scroll;
background-size: 55px 81px;

font-size: 20px;


     }

and this is the simple jquery

 $('#equipment').click(function(){

 $('#equipment').toggleClass('flashOn');

 }); 

i tested and the toggleClass work partially. as the font size change.. but it doesnt change the background image in the div. Any clue? thanks in advance., Paolo

Answer 1

change

$('#equipment').click(function(){

 $('#equipment').toggleClass('flashOn');

 });

to

    $('#equipment').click(function(){

 $('#equipment').toggleClass('flashOn flash');

 }); 

http://jsfiddle.net/osmanrahimi/xwnKP/215/