Añadir y eliminar clase con JavaScript

publicado por: Anonymous

Estoy haciendo 4 divs que son como opciones de un menu.

La idea que necesito hacer es:

Cuando pulse en cualquiera de los div, se debe añadir la clase active.
En caso de que ya exista en alguno de los otros div, se debe borrar esa clase previamente.

¿Alguna idea?

El HTML.

<div class="row">
 <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto">
   <h3>DEPILACIÓN <br>LÁSER</h3> 
 </div>
 <div id="lifting" class="col-3 cuadros cuadros-opciones2 center ">
   <h3>LIFTING <br> SIN CIRUGÍA</h3>     
 </div>
 <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 center">
   <h3>LIPOESCULTURA</h3>    
 </div>
 <div id="tattoos" class="col-3 cuadros cuadros-opciones4 center ">
   <h3>ELIMINACIÓN <br> TATTOOS</h3>  
 </div>
</div>

solución

Entiendo que lo que buscas es que segun hagas click en cualquiera de los div hijos de la clase row, le asocies la clase active y se la quites a la anterior.
Si quieres tener una por defecto puesta, la puedes poner en tu html o por jQuery segun carga la pagina.

_x000D_

_x000D_

$('div.row > div').on('click',function(){_x000D_
	$('div.row > div').removeClass('active');_x000D_
        $(this).addClass('active');_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="row">_x000D_
 <div id="depilacion" class="col-3 cuadros cuadros-opciones1 center efecto">_x000D_
   <h3>DEPILACIÓN <br>LÁSER</h3> _x000D_
 </div>_x000D_
 <div id="lifting" class="col-3 cuadros cuadros-opciones2 center ">_x000D_
   <h3>LIFTING <br> SIN CIRUGÍA</h3>     _x000D_
 </div>_x000D_
 <div id="lipoescultura" class="col-3 cuadros cuadros-opciones3 center">_x000D_
   <h3>LIPOESCULTURA</h3>    _x000D_
 </div>_x000D_
 <div id="tattoos" class="col-3 cuadros cuadros-opciones4 center ">_x000D_
   <h3>ELIMINACIÓN <br> TATTOOS</h3>  _x000D_
 </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *