web-dev-qa-db-fra.com

simple div onclick show javascript

lorsque je clique sur un lien, la division correspondante affiche , mais lorsque je clique sur le lien suivant, la nouvelle plongée sur laquelle vous avez cliqué s'affiche ainsi que la précédente sur laquelle vous avez cliqué. J'aimerais que le previos div se cache. NOUVEAU au développement s'il vous plaît, aidez-moi ........

c'est le code html pour les liens:

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

ce sont les divs:

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

.....etc

Code javascript

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

Bien que je déteste créer des variables globales, elles sont tellement utiles parfois ...

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

Cela vous évitera de chercher inutilement dans les divs pour trouver celui que vous devriez cacher.

Edit: Développer la suggestion de @ StevenRoose:

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

Dans votre showdiv (), vous devez d'abord faire en sorte que tous vos éléments display = "none"; , Puis rendre l'élément sélectionné display = "block";

Vous pouvez également l’organiser en deux fonctions hidealldivs (), qui masqueront toutes les divs et votre showdiv () actuelle, qui affichera sélectionné.

Puis onClick appelle les deux l'un après l'autre

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

Vous devez d'abord cacher vos divs. Soit dans la feuille de style ou en ligne.

.patientinfodivs {
    display: none;
}

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

Voici une version sans utiliser un global (autre que la fonction elle-même). La variable est maintenue sur l'objet fonction:

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