Aprendiendo a añadir y eliminar clases con jQuery. Ejemplo en jQuery, cuando se hace click sobre un elemento se elimina una clase y se añade otra nueva.
¿Cómo añadir y eliminar clases con jQuery?
Ejemplo en jQuery para añadir y eliminar clases con jQuery al hacer click sobre un elemento html. Para comprender mejor los métodos que vamos a utilizar, puedes consultar la documentación oficial de jQuery donde encontrarás ejemplos adicionales y especificaciones técnicas.
ARCHIVO HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll hacia un elemento html</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div class="content">
<h1>Añadir y eliminar clases con jQuery</h1>
<p>Al hacer click sobre un cuadro, se añade una clase que activa el cuadro con color azul.</p>
<div class="cuadros">
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
ARCHIVO JQUERY
// JavaScript Document
$(document).ready(function() {
$(".cuadros p").click(function () {
$(".cuadros p").removeClass("activo");
$(this).addClass("activo");
});
});
ARCHIVO CSS
@charset "utf-8";
/* CSS Document */
body{
background:#81d742;
}
.content{
width:1000px;
margin-top:50px;
min-height:600px;
background:#fff;
margin:0 auto;
padding:20px;
}
.cuadros p{
width: 30%;
height: 200px;
margin: 1%;
display:inline-block;
background: #000;
cursor:pointer;
transition:all 1s ease-in-out;
}
p.activo {
background-color: #09F;
transition:all 1s ease-in-out;
cursor:default;
}
Guía de clases con jQuery
- jQuery permite añadir y eliminar clases a elementos HTML con los métodos addClass() y removeClass()
- Al hacer click en un elemento, se puede eliminar una clase de otros elementos y añadir una nueva al clickeado
- El método removeClass() quita una clase específica del elemento seleccionado
- El método addClass() añade una clase CSS nueva al elemento para aplicarle estilos
- Las transiciones CSS se combinan con los cambios de clase para efectos visuales suaves
