web-dev-qa-db-fra.com

Rendre une div visible et une autre invisible

J'ai deux balises div, l'une pour la recherche et l'autre pour les résultats. Ce dont j'ai besoin, c'est que lorsque le bouton Soumettre est cliqué, les résultats sont retournés et placés dans la div des résultats (avec un iframe) et la div de recherche doit devenir masquée et les div de résultats doivent être rendus visibles.

la recherche div est initialement définie sur visible (en utilisant la visibilité sur visible) et les résultats div sont initialement définis sur caché (en utilisant la visibilité sur caché).

De plus, au départ, il y a un énorme espace blanc au bas de la page où se trouve le div caché, alors comment puis-je m'assurer qu'il n'y a pas d'espace blanc supplémentaire en bas également.

22
mattgcon

Le rendre invisible avec une visibilité lui fait encore consommer de l'espace. Essayez plutôt de définir l'affichage sur aucun pour le rendre invisible, puis définissez l'affichage sur bloquer pour le rendre visible.

19
My Other Me

Vous pouvez utiliser la propriété d'affichage de style. Définissez d'abord le style de section de résultat comme

style = "display:none"

Ensuite, le div ne sera pas visible et il n'y aura pas d'espace blanc.

Une fois les résultats de la recherche remplis, modifiez la propriété d'affichage à l'aide du script Java comme

document.getElementById("someObj").style.display = "block"

En utilisant Java script vous pouvez rendre le div invisible

document.getElementById("someObj").style.display = "none"
31
Sujith

Je ne pense pas que vous vouliez vraiment une iframe, n'est-ce pas?

À moins que vous ne fassiez quelque chose de bizarre, vous devriez récupérer vos résultats au format JSON ou (dans le pire des cas) XML, non?

Pour votre problème de boîte blanche/d'espace supplémentaire, essayez

style="display: none;"

au lieu de

style="visibility: hidden;"
9
CoolAJ86

Si vous voulez utiliser display = block, cela fera sauter le lecteur de contenu, donc au lieu d'utiliser display, vous pouvez définir l'attribut de gauche sur une valeur négative qui n'existe pas dans votre page html à afficher, mais c'est effectivement le cas.

J'espère que vous devez comprendre mon point de vue, si je suis incapable de vous faire comprendre, vous pouvez me renvoyer un message.

0
Prateek