Seleccionar solo la div donde se hace clic
Hola amigos, tengo 4 elementos div y quiero que al hacer clic en una de ellas las demas desaparezcan y solo quede en pantalla la que se selecciona con el clic.
Dejo código:
<style> .opcion { padding: 10px; color: #fff; max-width: 200px; margin:5px; } .verde { background-color: #20CE1B; } .rojo { background-color: #CE1B1B; } .azul { background-color: #1B65CE; } </style> <div class="opcion verde">Verde</div> <div class="opcion rojo">Rojo</div> <div class="opcion azul">Azul</div>Gracias..
0
Puntos
Puntos
1448
Visitas
Visitas
2
Resp
Resp
Por terminator hace 103 meses
Principiante
Respuesta #1
Hola terminator. Aquí te he hecho un script que hace lo que pides. Para ello necesitarás incorporar la librería de jquery en tu archivo.
optionDiv hace referencia al div de clase opcion. Entonces, al hacer click en un div que contenga esa clase les aplicará la clase hide (esconder), para aplicarle un display:none. Pero, al objeto que fue clickeado le removerá esa clase hide para que se muestre ese. Dime que tal te va con eso.
Agrega a tus estilos la clase hide
Hasta la vista, baby.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>El script es el siguiente:
<script> var optionDiv = $(".opcion"); optionDiv.click(function() { optionDiv.addClass("hide"); $(this).removeClass("hide"); }); </script>Te explico lo que hace:
optionDiv hace referencia al div de clase opcion. Entonces, al hacer click en un div que contenga esa clase les aplicará la clase hide (esconder), para aplicarle un display:none. Pero, al objeto que fue clickeado le removerá esa clase hide para que se muestre ese. Dime que tal te va con eso.
Agrega a tus estilos la clase hide
.hide { display: none; }
Hasta la vista, baby.
Respuesta #2
también puedes hacer algo así:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style> .opcion { padding: 10px; color: #fff; max-width: 200px; margin:5px; cursor: pointer; } .verde { background-color: #20CE1B; } .rojo { background-color: #CE1B1B; } .azul { background-color: #1B65CE; } </style> <div class="opcion verde">Verde</div> <div class="opcion rojo">Rojo</div> <div class="opcion azul">Azul</div> <script> $('.opcion').click(function() { $('.opcion').hide(); $(this).show(); }); </script>Demo https://jsfiddle.net/fm6grthn/
1
Puntos
Puntos
Por alber hace 103 meses
Administrador