Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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
2
Resp
366
Visitas
Por terminator hace 28 meses
Principiante offline

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.
<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.
1
Puntos
Por Jose hace 28 meses
Experto offline Sitio web

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
Por alber hace 28 meses
Administrador offline

Relaccionados

Para comentar Inicia sesión o Registrate