Para agregar y eliminar clases en jQuery haremos uso de las funciones .addClass() y .removeClass(), su sintaxis sería de la siguiente manera:
$('elementohtml').addClass('NombreDeClase');$('') convierte nuestro elemento html en un objeto jQuery y las funciones .addClass() y .removeClass() agregan a éste elemento html la clase la cual coloquemos como parámetro o argumento.
$('elementohtml').removeClass('NombreDeClase');
Un ejemplo de como agregar una clase por ejemplo a un párrafo para cambiar su color de fuente sería:
$(document).ready(function(){
$('p').addClass('azul');
});
Ésto suponiendo que tenemos en nuestro css una clase llamada .azul:
.azul {
color: #0938F0;
}
Y si queremos cambiar la clase del párrafo al hacer clic en un botón haríamos lo siguiente:
-Para agregar el botón usaremos la etiqueta de html <button> , su sintaxis sería:
<button type="button">Texto del boton</button>
-Y nuestro botón sería:
<button type="button">Agregar Clase</button>
Nuestro código jQuery para cambiar la clase del párrafo haciendo clic en el botón "Agregar Clase" sería:
$(document).ready(function(){
$('button').click(function(){
$('p').addClass('azul');
});
});
Y para quitar una clase haciendo clic en un botón:
$(document).ready(function(){
$('button').click(function(){
$('p').removeClass('azul');
});
});
En el siguiente ejemplo agregamos una clase a un texto en un div y lo transformamos en un cuadrado, y a un rectángulo le quitamos su clase y lo convertimos en un simple texto:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-family:arial;
}
.rectangulo{
display: inline-block;
height:150px;
width:400px;
background-color:#BB17ED;
font-family:arial;
color:#ffffff;
border-radius: 8px;
text-align:center;
margin-top:5px;
}
.azul{
display: inline-block;
height:200px;
width:200px;
background-color:#0938F0;
font-family:arial;
color:#ffffff;
border-radius: 8px;
text-align:center;
margin-top:5px;
}
</style>
<title>Agregar y eliminar clases jQuery</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<h2>Haz clic en los botones para eliminar y agregar las clases</h2>
<button id="uno" type="button">Agregar Clase</button>
<button id="dos" type="button">Quitar Clase</button>
</br>
<div id="cuadrado">Soy un cuadro</div>
<div Class="rectangulo">Soy un rectangulo</div>
<script>
$(document).ready(function(){
$('#uno').click(function(){
$('#cuadrado').addClass('azul');
});
$('#dos').click(function(){
$('.rectangulo').removeClass('rectangulo');
});
});
</script>
</body>
</html>
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure