simple div onclick mostrar javascript

Question

cuando hago clic en cualquier enlace, el div correspondiente aparece pero cuando hago clic en el siguiente enlace, aparece la nueva pulsación y también la anterior. Me gustaría que el div anterior se oculte. NUEVA al desarrollo por favor, que alguien me ayude ........

este es el código HTML para los enlaces:

<a class="hide" onclick="showdiv('firstimpression'); " href="#">First Impression</a> 
<a class="hide" onclick="showdiv('speaking'); " href="#">Speaking</a> 
<a class="hide" onclick="showdiv('eating'); " href="#">Eating</a> 
<a class="hide" onclick="showdiv('taste'); " href="#">Taste</a> 
<a class="hide" onclick="showdiv('saliva'); " href="#">Saliva</a> 
<a class="hide" onclick="showdiv('cleaning');" href="#">Cleaning</a> 
<a class="hide" onclick="showdiv('nighttime');" href="#">Night Time</a> 
<a class="hide" onclick="showdiv('singledenture');" href="#">Single Denture</a> 
<a class="hide" onclick="showdiv('soreness');" href="#">Soreness</a> 
<a class="hide" onclick="showdiv('burning');" href="#">Burning</a> 
<a class="hide" onclick="showdiv('adapting');" href="#">Adapting</a> 
<a class="hide" onclick="showdiv('futureconsideration');" href="#">Future Consideration</a> 
<a class="hide" onclick="showdiv('conclusion');" href="#">Conclusion</a> 

estos son los divs:

<div id="firstimpression" class="patientinfodivs"> 
<div id="speaking" class="patientinfodivs"> 

... ..y así sucesivamente código

Javascript

<script type="text/javascript"> 
function showdiv(id){ 
document.getElementById(id).style.display = "block"; 
} 
</script> 

Answer 1

Por mucho que odie la creación de variables globales, que acaba de llegar de manera útil a veces ...

var _hidediv = null; 
function showdiv(id) { 
    if(_hidediv) 
     _hidediv(); 
    var div = document.getElementById(id); 
    div.style.display = 'block'; 
    _hidediv = function() { div.style.display = 'none'; }; 
} 

Esto evitará que innecesariamente buscando a través de divs para encontrar el que debe ocultar.

Editar: Ampliando la sugerencia de @ StevenRoose:

var _targetdiv = null; 
function showdiv(id) { 
    if(_targetdiv) 
     _targetdiv.style.display = 'none'; 
    _targetdiv = document.getElementById(id); 
    _targetdiv.style.display = 'block'; 
} 

Answer 2

Necesita mostrar en su showdiv() primero todos sus elementos = "ninguno"; Y luego hacer que el elemento seleccionado aparezca = "bloque";

También puede organizarlo en dos funciones hidealldivs(), que ocultará todos los divs y su showdiv actual(), que se mostrará seleccionado.

Entonces onClick llamar a ambos, uno tras otro

onclick="hidealldivs(); showdiv('eating')" 

Answer 3

Es necesario ocultar inicialmente su divs. Ya sea en StyleSheet o en línea.

.patientinfodivs { 
    display: none; 
} 

<div id="firstimpression" class="patientinfodivs" style="display: none;"> 

Answer 4

Aquí hay una versión sin utilizar un mundial (que no sea la propia función). La variable se mantiene en el objeto de función:

function showdiv(id) { 
    if(showdiv.div) { 
     showdiv.div.style.display = 'none'; 
    } 
    showdiv.div = document.getElementById(id); 
    showdiv.div.style.display = 'block'; 
}