1

Tengo un panel de usuario el cual tiene un wrapper que contiene diferentes opciones por las que navegar por la página.

Mi problema está en que he puesto contenido en la página y a la hora de presionar las opciones cambia el contenido entre sí pero deja el principal.

Adjunto captura y código para que quede más claro.

Captura de pantalla del problema

La imagen es el contenido principal y los datos de abajo es la opción perfil que quiero que se ponga arriba quitando la imagen principal.

Éste es el código:

<a href="#"onclick="populateData('Profile');" class="list-group-item list-group-item-action bg-dark" style="color:white">Perfil</a>

<template id="Profile">Contenido usuario</template>

<div>
        <div id="datoCurioso"> <img src="../img/datocurioso(1).png" style="height:100%"></div>
        <div id="content"></div>
</div>

<script>
        const targetDiv = document.getElementById("content");

        // Función basada en el ejemplo de la pregunta:
        const populateData = (idType) => {
        if (typeof idType !== "string")
            return;

                switch (idType) {
                    case '4coach':{
                        targetDiv.append(coach.content);
                        break;
                }
                    case 'VideoIni':{
                        targetDiv.append(VideoI.content);
                        break;
                }
                    case 'VideoS':{
                        targetDiv.append(Videos.content);
                        break;
                }
                    case 'ColabIni':{
                        targetDiv.append(colabI.content);
                        break;
                }
                    case 'Colab':{
                        targetDiv.append(col.content);
                        break;
                }
                    case 'Shop':{
                        targetDiv.append(tienda.content);
                        break;
                }
                    case 'Profile':{
                        targetDiv.append(perfil.content);
                        break;
                }
                    case 'Contact':{
                        targetDiv.append(contacto.content);
                        break;
                }
                default:
    console.log('Lo lamentamos, por el momento no disponemos de ${idType}.');
            break;

              }
        };
        populateData($idType);
             
</script>

He probado a hacer esto, pero no me funciona:

<script>
        $('body').click(function() {
         $('#datocurioso').fadeOut();
        });
        $('#datocurioso').click(function(event){
         event.stopPropagation();
        });
</script>
1
  • No entiendo qué intentas hacer con el código javascript. Cuando haces click en la imagen paras la propagación, por lo que no llega al click de body y no hace el fadeout de datoCurioso.
    – Marc N
    Commented el 30 jul. 2020 a las 11:42

2 respuestas 2

1

Debes eliminar todo el contenido de targetDiv antes de agregar el nuevo:

/* Mientras queden hijos, elimino el último */
while (targetDiv.firstChild) {
    targetDiv.removeChild(targetDiv.lastChild);
}

También puedes hacerlo de esta otra forma:

targetDiv.innerHTML = '';

Tu código quedaría como sigue (te indico solo las modificaciones dentro <script>):

<script>
    const targetDiv = document.getElementById("content");

    // Función basada en el ejemplo de la pregunta:
    const populateData = (idType) => {
        if (typeof idType !== "string") {
            return;
        }

        /* Borramos el contenido anterior */
        targetDiv.innerHTML = '';

        switch (idType) {
            case '4coach':
                targetDiv.append(coach.content);
                break;
            case 'VideoIni':
                targetDiv.append(VideoI.content);
                break;
            case 'VideoS':
                targetDiv.append(Videos.content);
                break;
            case 'ColabIni':
                targetDiv.append(colabI.content);
                break;
            case 'Colab':
                targetDiv.append(col.content);
                break;
            case 'Shop':
                targetDiv.append(tienda.content);
                break;
            case 'Profile':
                targetDiv.append(perfil.content);
                break;
            case 'Contact':
                targetDiv.append(contacto.content);
                break;
            default:
                console.log('Lo lamentamos, por el momento no disponemos de ${idType}.');
        }
    };
    populateData($idType);
</script>

Por cierto, lo que deseas hacer se puede hacer usando solo HTML y CSS, usando Javascript únicamente para cargar el menú por defecto:

/* Si queremos, podemos cargar por defecto el menú 1 */
document.location.hash = "#menu1";
/* Menú lateral */
.menu {
  position: fixed;
  display: block;
  left: 0px; top: 0px;
  height: 100%; width: 10em;
  background: #ffb;
  padding: 20px 5px;
}
body {
  margin-left: 11em;
}

/* Por defecto  no mostramos los menús */
#menu1, #menu2, #menu3, #menu4 {
  display: none;
}

/* Cuando son seleccionados los mostramos */
#menu1:target, #menu2:target, #menu3:target, #menu4:target {
  display: block;
}
<!-- Menú lateral -->
<div class="menu">
  <p><a href="#menu1">Menu 1</a></p>
  <p><a href="#menu2">Menu 2</a></p>
  <p><a href="#menu3">Menu 3</a></p>
  <p><a href="#menu4">Menu 4</a></p>
</div>
<!-- Contenidos a mostrar en cada menú -->
<div id="menu1">Hola, este es el menú 1</div>
<div id="menu2">Hola, este es el menú 2</div>
<div id="menu3">Hola, este es el menú 3</div>
<div id="menu4">Hola, este es el menú 4</div>

Aunque también podemos quitar ese código javascript y hacerlo 100% HTML y CSS modificando el orden de los <div>:

/* Menú lateral */
.menu {
  position: fixed;
  display: block;
  left: 0px; top: 0px;
  height: 100%; width: 10em;
  background: #ffb;
  padding: 20px 5px;
}
body {
  margin-left: 11em;
}

/* Por defecto  no mostramos los menús excepto el 1, que se ocultará
    solo si otro diferente ha sido marcado */
#menu2, #menu3, #menu4, :target ~ #menu1 {
  display: none;
}

/* Al igual que antes, mostramos el menú seleccionado */
#menu2:target, #menu3:target, #menu4:target {
  display: block;
}
<!-- Menú lateral -->
<div class="menu">
  <p><a href="#menu1">Menu 1</a></p>
  <p><a href="#menu2">Menu 2</a></p>
  <p><a href="#menu3">Menu 3</a></p>
  <p><a href="#menu4">Menu 4</a></p>
</div>
<!-- Contenidos a mostrar en cada menú -->
<div id="menu4">Hola, este es el menú 4</div>
<div id="menu3">Hola, este es el menú 3</div>
<div id="menu2">Hola, este es el menú 2</div>
<div id="menu1">Hola, este es el menú 1 (por defecto)</div>

11
  • hay alguna forma de hacerlo sin cambia el código? Commented el 31 jul. 2020 a las 7:24
  • "Sin modificar el código" es imposible, ya que tienes que hacer modificaciones. La más sencilla es la primera que te propongo (la de eliminar el contenido de targetDiv. Edito mi respuesta para ponerte un ejemplo completo de cómo quedaría tu código. Commented el 31 jul. 2020 a las 8:39
  • vale, muchas gracias Commented el 31 jul. 2020 a las 8:41
  • Hecho. He puesto cómo quedaría tu código con la modificación que te propongo. Por cierto, he quitado las llaves de los case (no son necesarias). Commented el 31 jul. 2020 a las 8:45
  • Tal vez no te he entendido bien, pero lo que propones no me cambia el código y seria perfecto, o tengo que cambiar el menu tambien? Commented el 31 jul. 2020 a las 8:52
0

Hola Tiene que cambiar el orden de los div de la siguiente manera

<div id="datoCurioso"> <img src="../img/datocurioso(1).png" style="height:100%"></div>

 <div id="content"></div>

y con respecto a la imagen si quieres que la imagen aparezca en el fondo de cualquier texto te recomiendo ponerlo con

 background="miimagen.gif"

sobre el div o sobre body. o si es un div informativo cree parámetros de altura y ancho para que esto no utilice el 100% de la pagina

2
  • no es eso lo que busco, lo que quiero es que la imagen se quite, no quiero que este debajo ni de fondo, quiero que desaparezca Commented el 31 jul. 2020 a las 7:22
  • elimina esta etiqueta <img src="../img/datocurioso(1).png" style="height:100%"> Commented el 31 jul. 2020 a las 13:16

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.