simple div onclick show javascript

Question

po kliknięciu dowolnego linku pojawia się kod divrespoding , ale po kliknięciu następnego łącza pojawia się nowo kliknięte nurkowanie oraz poprzednio kliknięte. Chciałbym, żeby previos div się schował. NEW rozwoju proszę ktoś mi pomóc ........

jest to kod html do linków:

<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> 

oto DIV:

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

... ..i tak dalej kodu

Javascript

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

Answer 1

Aż Nienawidzę tworzenia zmiennych globalnych, po prostu przyjść w tak przydatny czasami ...

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

To uniemożliwi niepotrzebnie przeszukując div, aby znaleźć taki powinien ukrycia.

Edit: Rozwijając użytkownika @ StevenRoose sugestia:

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

Answer 2

Potrzebujesz w swoim showdiv() najpierw pokaż wszystkie elementy display = "none"; A następnie ustawić wyświetlanie wybranego elementu = "blok";

Możesz również zorganizować go w dwóch funkcjach hidealldivs(), które ukryją wszystkie divy i twoje bieżące showdiv(), które pokaże wybrane.

Następnie onClick zadzwonić zarówno z nich jeden po drugim

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

Answer 3

musisz początkowo ukryć DIV. Albo w StyleSheet, albo w linii.

.patientinfodivs { 
    display: none; 
} 

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

Answer 4

Oto wersja bez użycia globalną (inne niż samej funkcji). Zmienna jest przechowywana w obiekcie funkcji:

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