webentwicklung-frage-antwort-db.com.de

einfaches div onclick show javascript

wenn ich auf einen Link klicke, wird das entsprechende div angezeigt , aber wenn ich auf den nächsten Link klicke, wird der neu angeklickte Tauchgang ebenso angezeigt wie der zuvor angeklickte. Ich möchte, dass der previos div sich versteckt. NEU in der Entwicklung bitte helfen Sie mir bitte ........

dies ist der HTML-Code für Links:

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

das sind die divs:

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

.....und so weiter

Javascript-Code

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

So sehr ich es hasse, globale Variablen zu erstellen, sind sie manchmal so nützlich ...

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

Dies verhindert, dass Sie die Divs unnötig durchsuchen müssen, um das zu finden, das Sie verstecken sollten.

Edit: Erweiterung auf @ StevenRoses Vorschlag:

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

Sie müssen in Ihrem showdiv () zuerst alle Ihre Elemente anzeigen lassen = "none"; Und dann machen Sie das ausgewählte Element display = "block";

Sie können es auch in zwei Funktionen hidealldivs () organisieren, wodurch alle Divs und Ihr aktuelles showdiv () ausgeblendet werden, was ausgewählt wird.

Dann rufen Sie onClick nacheinander an

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

Sie müssen zunächst Ihre Divs ausblenden. Entweder im StyleSheet oder inline.

.patientinfodivs {
    display: none;
}

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

Hier ist eine Version ohne eine globale (anders als die Funktion selbst). Die Variable wird im Funktionsobjekt gehalten:

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