Estuve analizando un poco el código publicado acá y encontré varios detalles que puedes corregir:
En lugar de escribir:
event.target.href
Cámbialo por:
event.tarjet.getAttribute("href")
La razón es que la primera te devuelve una ruta absoluta mientras que la segunda te devuelve la cadena que necesitas.
Por ejemplo, si partimos de la siguiente estructura HTML:
<a href="#Shop">Tienda</a>
<a href="#Profile">Perfil</a>
<a href="#Contact">Contacta</a>
<div id="content"></div>
Para el caso de las switch
, también debes aplicar las siguientes correcciones que se explican más abajo en el siguiente fragmento de código en sus comentarios:
function populateData(event) {
switch (event.target.href) { // Colocar event.target.getAttribute("href") en su lugar.
// No necesitas colocar llaves ({}) aquí,
// además, de faltar la almohadilla (#)
// en «Shop»:
case 'Shop': {
...
break;
}
// No necesitas colocar llaves ({}) aquí,
// además, de faltar la almohadilla (#)
// en «Profile»:
case 'Profile': {
...
break;
}
}
targetDiv.innerHTML = htmlContent;
}
Entonces, teniendo claro todo lo anterior las correcciones que podrías aplicar serían:
Cambiar event.target.href
por event.target.getAttribute("href")
para obtener el valor específico del atributo href
en lugar de su ruta absoluta.
Colocarle las almohadillas o hastash (#) a Shop
y Profile
.
Ejemplo en acción
Lo que sigue es un ejemplo sencillo para poner en práctica lo explicado en esta publicación. No olvides leer los comentarios del código:
var contenido = document.querySelector("#content"),
htmlContent = "";
const populateData = (event) => {
// Se utiliza «event.target.getAttribute("href")» en su
// lugar. El objetivo es obtener su ruta relativa
// en lugar de su ruta absoluta:
let href = event.target.getAttribute("href");
switch (href) {
// Almohadilla (#) puesta en «Shop»
case "#Shop":
htmlContent = `
<p>Texto de prueba</p>
<img src="https://cdn.pixabay.com/photo/2020/05/13/14/44/poppy-5167737_960_720.jpg" alt="">`;
break;
// Almohadilla (#) puesta en «Profile»
case "#Profile":
htmlContent = `<p>Texto de prueba numero 2</p>
<img src="https://cdn.pixabay.com/photo/2017/03/03/09/43/macro-2113633_960_720.jpg" alt="">`;
break;
// Contacto:
case "#Contact":
htmlContent = "<h2>Contacto</h2>"
break;
}
// En su lugar, nuestra función devuelve el contenido
// que cargará en el elemento «#content»:
return htmlContent;
};
// Tome en cuenta que debe capturar el evento del mouse
// para permitirle al usuario interactuar con los enlaces:
menu.onclick = (e) => {
contenido.innerHTML = populateData(e);
};
:root {
font-family: "Open Sans", sans-serif, arial;
}
a {
color: #0080d4;
text-decoration: none;
padding: 0 10px;
}
a:hover {
text-decoration: underline;
}
ul {
display: flex;
list-style: none;
padding-left: 0;
}
li {
transition: 300ms ease;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 5px;
}
li:hover {
background-color: rgba(0, 128, 213, 0.05);
}
img {
max-width: 100%;
max-height: 300px;
}
<!-- HTML simplificado -->
<ul id="menu">
<li><a href="#Shop">Tienda</a></li>
<li><a href="#Profile">Perfile</a></li>
<li><a href="#Contact">Contacto</a></li>
</ul>
<div id="content"></div>
Importante: El problema se encontraba principalmente en la primera parte mencionada de la página, solo que en esta oportunidad tomé la tarea de simplificar un poco el código.
Tome en cuenta también que la hoja de estilo se colocó con el objeto de hacer más fácil de visualizar el ejemplo. Sin embargo, no forma parte de la solución porque su función es ilustrar.