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.
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>