0

Estoy haciendo una pagina que consta de un menú de navegación con tres botones, los cuales abren cada uno un panel de navegación(div) lateral(izq) distinto, que esta lleno de botones que abren cada uno un div con varias imágenes que se muestran en el resto de la pagina.

El primer problema es como consigo que al hacer click en uno de los botones del navegador principal desaparezca el div(navegador lateral) que este abierto en ese momento. Es decir, cada botón abre su navegador lateral y a la vez cierra el que estuviese activo para dejar el sitio al que pulsemos.

El segundo problema viene a ser el mismo al hacer click en uno de los botones del div lateral necesito que cierre el div(con imagenes) activo y abra el otro en esa posición.

Hasta ahora he conseguido que al hacer click sobre un botón del menú de navegación aparezca su div pero se quedan en bloque y necesito hidear el anterior de alguna forma para que el activo se coloque en la posición del anterior (Ahora se quedan según están en el html, si abro de los últimos a los primero si hace su función, pero si es al contrario no y voy a estar dando clicks de uno a otro constantemente y no es plan estar recargando la pagina.

Llevo dos días buscando la forma con show/hide pero solo encuentro ejemplos en los que crean un botón que descubre o esconde un párrafo, y no quiero tener que estar dando un click extra cada vez que cambio de botón que van a ser muchas :P

No se si me he explicado bien pero básicamente es que al hacer click en X etiqueta/elemento se abra su div y cierre el de Y para "dejar" su sitio al de X.

Cualquier ayuda es bienvenida, saludos.

2 respuestas 2

1

Buen día, te dejo otro ejemplo que espero te sirva. Saludos.

function init(){
	var x = document.getElementById("primero");
    var y = document.getElementById("segundo");
    var z = document.getElementById("tercero");
    x.style.display = "block";
    y.style.display = "none";
    z.style.display = "none";  

}

function myFunctionB1() {
    var x = document.getElementById("primero");
    var y = document.getElementById("segundo");
    var z = document.getElementById("tercero");
    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none";
        z.style.display = "none";   
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "none";        
    }
    
}

function myFunctionB2() {
    var x = document.getElementById("primero");
    var y = document.getElementById("segundo");
    var z = document.getElementById("tercero");
    if (y.style.display === "none") {
        y.style.display = "block";
        x.style.display = "none";
        z.style.display = "none";  
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "none";        
    }
}

function myFunctionB3() {
    var x = document.getElementById("primero");
    var y = document.getElementById("segundo");
    var z = document.getElementById("tercero");
    if (z.style.display === "none") {
        z.style.display = "block";
        x.style.display = "none";
        y.style.display = "none";
    } else {
        x.style.display = "none";
        y.style.display = "none";
        z.style.display = "none";        
    }
}

init();
#primero{
  background: yellow;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  color: orange;
  font-size: 2rem;

}

#segundo{
	background: red;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  color: orange;
  font-size: 2rem;
}

#tercero{
	background: blue;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  color: orange;
  font-size: 2rem;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Show_Hide</title>
	<link rel="stylesheet" type="text/css" href="css/show_hide.css">
</head>
<body>
	<button type="B1" onclick="myFunctionB1()">Primer div</button>
	<button type="B2" onclick="myFunctionB2()">Segundo div</button>
	<button type="B3" onclick="myFunctionB3()">Tercer div</button>
	<div id="primero">
		Primero
	</div>
	<div id="segundo">
		Segundo
	</div>
	<div id="tercero">
		Tercero
	</div>

	<script src="js/show_hide.js" type="text/javascript" charset="utf-8" async defer></script>

</body>
</html>

3
  • 1
    Hola Gabriel, bienvenido a Stack Overflow en español gracias por esa respuesta que aparentemente es lo que pide el usuario. Pero por otro lado siempre es muy recomendable que la persona que pregunta ponga el código de al menos lo que ha intentado. Por lo demás buena respuesta!
    – rencinas
    Commented el 13 sept. 2018 a las 7:39
  • Gracias a los dos, la de javi a sido probarla para el navegador que son solo tres botones y funciona a la perfección , pero la de gabriel creo que me va a venir mejor ahora que los paneles laterales tienes mas de 50 botones :P Commented el 13 sept. 2018 a las 8:17
  • la verdad un genio estuve buscando y como recien comienzo es lo que mas se me quedo gracias
    – Jorge
    Commented el 4 mar. 2019 a las 5:00
0

Te dejo un ejemplo muy sencillo. Habría que mejorar la parte de la gestión de los eventos de los botones, por ejemplo, pero te sirve para ver la funcionalidad que buscas

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="botones">
<button onclick="$('#dos').hide();$('#tres').hide();$('#uno').show();">Uno</button>
<button onclick="$('#uno').hide();$('#tres').hide();$('#dos').show();">Dos</button>
<button onclick="$('#uno').hide();$('#dos').hide();$('#tres').show();">Tres</button>
</div>
<div id="uno" style="width:200px;height:200px;display:none">
<span>Contenido del uno</span>
</div>
<div id="dos" style="width:200px;height:200px;display:none">
<span>Contenido del dos</span>
</div>
<div id="tres" style="width:200px;height:200px;display:none">
<span>Contenido del tres</span>
</div>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.