Hola disculpe de antemano si esto ya se ha preguntado pero no encuentro la respuesta.
Tengo un conjunto de enlaces que activan ciertas identificaciones para que se muestren al hacer clic, funciona, pero se supone que un enlace activa la visualización de 2 identificaciones. Mi conocimiento de javascript no es muy bueno. Gracias por cualquier ayuda.
Aquí está mi codepen https://codepen.io/louise-fourie/pen/abVdwyZ
<li> <a href="#!" class="article-btn" onclick="show('el-57d5b6f71db32029');">Fitness & Wellness</a> </li> <li> <a href="#!" class="article-btn" onclick="show('el-57d5b6f71db32029');show('el-e881a23a64890108');">Business</a> </li> <li> <a href="#!" class="article-btn" onclick="show('el-65ebd7b2380005a1');">Arts & Entertainment</a> </li> </ul> <div class="articles"> <div id="el-57d5b6f71db32029">fitness</div> <div id="el-e881a23a64890108">business</div> <div id="el-65ebd7b2380005a1">art</div> </div> <script> var divs = ["el-57d5b6f71db32029", "el-e881a23a64890108", "el-65ebd7b2380005a1"]; var visibleId = null; function show(id) { for(i = 0; i < divs.length; i++) { if(visibleId !== id) { visibleId = id; } } hide(); } function hide() { var div, i, id; for(i = 0; i < divs.length; i++) { id = divs[i]; div = document.getElementById(id); if(visibleId === id) { div.style.display = "block"; } else { div.style.display = "none"; } } } </script>Hay algo raro en tu lógica de mostrar y ocultar.
Consulte mi sugerencia a continuación, donde puede pasar una serie de ID, que desea mostrar. Todos los demás elementos estarán ocultos.
function onClick(elements) { document.querySelectorAll('.articles div').forEach(articleDiv => articleDiv.style.display = 'none'); elements.forEach(element => { const domEl = document.querySelector('#' + element) domEl.style.display = 'block'; }) } <ul> <li> <a href="#!" class="article-btn" onclick="onClick(['fitness'])">Fitness & Wellness</a> </li> <li> <a href="#!" class="article-btn" onclick="onClick(['art', 'business'])">Business</a> </li> <li> <a href="#!" class="article-btn" onclick="onClick(['art'])">Arts & Entertainment</a> </li> </ul> <div class="articles"> <div id="fitness">fitness</div> <div id="business">business</div> <div id="art">art</div> </div> <script> </script>Su función parece estar ejecutándose, pero cada vez que recibe una ID en su función, oculta todo lo demás con la función "ocultar", por lo que al final, la última ID enviada es la única que se mostrará, intente esto:
Llame a la función una vez, pero pase los ID como una cadena separada por comas
<a href="#!" class="article-btn" onclick="show('el-57d5b6f71db32029,el-e881a23a64890108')">Business</a>Luego cambie su función "mostrar" de esta manera:
function show(ids) { let idArr = ids.split(","); divs.forEach( x => { div = document.getElementById(x); div.style.display = (idArr.includes(x) ? "block" : "none"); }); }Lo que esto hace es que creará una matriz de ID en función del parámetro que envíe, y para cada elemento verificará si se envió la ID y la mostrará/ocultará.
Por favor, hágame saber si esto ayuda o si necesita más detalles.
EDITAR: formatear el código JavaScript y simplificarlo. Tenga en cuenta también que aquí no estoy validando si existe un elemento con la ID, es solo para mostrarle cómo puede funcionar. Necesitará validaciones adicionales
Puedes probarlo
<ul> <li> <a href="#!" class="article-btn" data-id="el-57d5b6f71db32029">Fitness & Wellness</a> </li> <li> <a href="#!" class="article-btn" data-id="el-57d5b6f71db32029;el-e881a23a64890108">Business</a> </li> <li> <a href="#!" class="article-btn" data-id="el-65ebd7b2380005a1">Arts & Entertainment</a> </li> </ul> <div class="articles"> <div id="el-57d5b6f71db32029" style="display:none;">fitness</div> <div id="el-e881a23a64890108" style="display:none;">business</div> <div id="el-65ebd7b2380005a1" style="display:none;">art</div> </div> <script> document.querySelectorAll('.article-btn').forEach(item => { item.addEventListener('click', event => { show((item.getAttribute('data-id')).split(";")); }) }) const show = (id) => { document.querySelectorAll('.articles>div').forEach(item => { if(id.includes(item.getAttribute('id'))){ item.style["display"] = "block"; }else{ item.style["display"] = "none"; } }); } </script>