requisitos - Muestra 1 div y oculta todos los demás al hacer clic con Javascript

javascript pdf

Question

Estoy configurando una sección "bio" en mi sitio y tengo 3 imágenes de empleados y 3 divisiones con cada una de las biografías de los empleados a continuación. Quiero ocultar todas las bios por defecto y luego mostrar solo el div asociado con la imagen que se hace clic y ocultar todos los demás divs.

Actualmente parece que no está encontrando los elementos porque me estoy "indefiniendo"

Aquí está mi HTML hasta ahora:

<div onclick="showhide(''bill'');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide(''bill2'');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide(''bill3'');" class="bio_image"><div class="name">Bill Murray</div></div>
<div class="hide" id="bill">BILL</div>
<div class="hide" id="bill2">BILL2</div>
<div class="hide" id="bill3">BILL3</div>

Y mi Javascript:

function showhide(id){
if (document.getElementById) {
var divid = document.getElementById(id);
var divs = document.getElementsByClassName("hide");
for(var div in divs) {
div.style.display = "none";
}
divid.style.display = "block";
}
return false;
}

JSFiddle

¿Algunas ideas? ¡Gracias!

Answer 1

Al usar for(var div in divs) , div no es el elemento. Esta notación se usa al iterar objetos JSON.

Desea usar esto en su lugar:

for(var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}

Answer 2

Utilice un bucle for for in un bucle for in bucle sobre las otras propiedades de NodeList y no solo sobre la lista de elementos

function showhide(id){
if (document.getElementById) {
var divid = document.getElementById(id);
var divs = document.getElementsByClassName("hide");
for(var i=0;i<divs.length;i++) {
divs[i].style.display = "none";
}
divid.style.display = "block";
}
return false;
}

JSFiddle