0

Tengo un wrapper con botones y un contenedor a la derecha, mi idea es que cuando presiono uno de los botones del wrapper el href no me redirija a otra página sino que muestre un div el id correspondiente. El problema que tengo es que se me ponen los div uno debajo del otro y a la hora de presionar el boton hace efecto scroll, es decir, baja a donde esta el contenido de ese div. yo lo que quiero es que muestre solo uno y al presionar se cambie por el otro.

Este es mi código:

<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
  <div class="sidebar-heading">Panel de usuario </div>
  <div class="list-group list-group-flush">
    <a href="#Shop" class="list-group-item list-group-item-action bg-light">Tienda</a>
    <a href="#Profile" class="list-group-item list-group-item-action bg-light">Perfil</a>
    <a href="#Contact" class="list-group-item list-group-item-action bg-light">Contacta</a>
  </div>
</div>
  
<!-- /#sidebar-wrapper -->

<!-- Page Content -->
<div id="page-content-wrapper">
  <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <button class="btn btn-primary" id="menu-toggle">Menu</button>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="../index.html">Inicio <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">       
          <a class="nav-link" href="logout.php">Cerrar Sesion</a>
        </li>
      </ul>
    </div>    
  </nav>
<div>
    <div id="Shop">
          <img src="../img/carlos1.png" alt="">

    </div>
    <div id="Contact">

          <img src="../img/carlos2.png" alt="">
    </div>    
</div>
</div>
  
<!-- /#page-content-wrapper -->

En este código lo que busco es que al presionar una de las opciones del sidebar muestre las imagenes de los div de abajo. Solo debería mostrar uno y en el caso de que presione sobre el boton tienda o contacta. Pero a mi me muestra una debajo de otra y al presionar el boton hace scroll.

1 respuesta 1

1

No entiendo muy bien tu código, pero si entiendo la idea de lo quieres hacer (o al menos eso creo). Así que te voy a poner un ejemplo y luego tu lo adaptas a como lo necesites.

Contexto:

Tengo un div llamado "vista", y dos botones. Dependiendo de que botón presione el usuario "vista" va a tener cierto(s) elementos. Entonces, voy añadir el evento onclick a los dos botones, cada evento invoca una función diferente. Esta función hace un innerHTML sobre el div "vista":

<button onclick="ver1()">Opcion 1</button>
<button onclick="ver2()">Opcion 2</button>
<div id="vista"></div>
<script src="script.js" type="text/javascript"></script>

Obviamente cargo el script al final del body, para que se carguen primero todos los elementos (botones y contenedor). Así me ahorro los problemas que suelen generar los eventos.

Hecho esto, en la página se ve algo así:

introducir la descripción de la imagen aquí

Ahora, como dependo de innerHTML para que "vista" se dinámico voy a definir las funciones en Javascript:

const vista = document.getElementById("vista")

function ver1() {
    vista.innerHTML = //Aquí añadí una imagen de internet
}

function ver1() {
    vista.innerHTML = //Y aquí los lyrics de Skys The Limit de Biggie Smalls
}

Nota: Puse comentarios para describir lo que puse en cada innerHTML, ya que los lyrics completos son largos y el link de la imagen también.

Resultados:

Finalmente, veamos la página cuando presiono el botón que dice "opcion 1":

introducir la descripción de la imagen aquí

Y cuando presiono el botón que dice "opcion 2":

introducir la descripción de la imagen aquí

No sé si me haya explicado claramente, pero al menos espero que sirva de algo (no dudes en corregirme si no te entendí bien). Saludos!

4
  • Si entiendo la forma en que lo haces pero la veo bastante compleja, yo se que hay una forma de con una navbar segun presiono en los hipervinculos <a> cambiaba el contenido si lo ponias dentro de un div en concreto. La forma que me dices me funciona perfecto pero la veo mas dificil que la otra. Commented el 25 jun. 2020 a las 13:42
  • Tu investigación no ha tenido resultados? Es que nunca había escuchado esa manera. xDD
    – user166844
    Commented el 25 jun. 2020 a las 17:05
  • No aún no, pero en su momento lo hice, cuando empeze a toquetear html hice un navbar que me cambiaba de div en vez de hacer scroll, era en un container-fill de bootstrap 4 Commented el 25 jun. 2020 a las 17:55
  • Este codigo fue el que hice, es muy sencillo pero funcionaba de la forma que quiero, aunque no se el porque. drive.google.com/file/d/1Q1mVhsEbXlfMitUK97fDoDjh1ViUyhKj/… Commented el 25 jun. 2020 a las 18:00

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.