Añadir y eliminar clases con jQuery

//Añadir y eliminar clases con jQuery

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.

añadir y eliminar clases con jquery

jQuery: 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.

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;
}

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies