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;
// Acción por defectoContacto:
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>