Удалить и добавить класс

Question

Единственное, что мне нужно сделать, это изменить кнопку класса, когда я нажимаю кнопку, но она не работает. если я снова нажму, он снова изменится.

HTML

<div class="frame"> 
    <div class="off">Off</div> 
    <div class="on">On</div> 
</div> 

JQuery

$(document).ready(function() { 
    $('.frame').on('click', function() { 
     //$(this).removeClass('.on'); 
     $(this).removeClass("on"); 
    }); 
}); 

CSS

.on { 
position: absolute; 
top: 0; 
width: 160px; 
background-color: #33FF33; 
text-align: center; 
float: left; 
} 
.off { 
position: absolute; 
top: 0; 
width: 160px; 
background-color: #FF3333; 
text-align: center; 
float: left; 
} 

Что не так?

Answer 1

Как об этом один:.

$('.frame').on('click',function(ev){ 
     $(this).toggleClass('on off') 
}); 

Надеется, что это помогает