Correct façon de cacher le contenu HTML

Question

J'écris une petite application HTML + JavaScript (donc d'appeler). L'utilisateur a deux choix (boutons radio) et selon ce qu'il a choisi, j'affiche le contenu "A" ou le contenu "B" sous les boutons radio de choix.

Maintenant, je me demande quelle est la bonne façon de gérer ce contenu. Dois-je avoir 2 DIV, un seul visible, selon le choix, ou devrais-je utiliser JavaScript pour écrire InnerHTML à div unique, en fonction de l'état des boutons radio. C'est une petite application de "calcul", donc aucune donnée de formulaire ne sera soumise.

Merci pour vos réponses! J

Answer 1

Vous pouvez utiliser:

.myDivHidden 
{ 
    display: none; 
} 

.myDiv 
{ 
    display: block; 
} 

<div id="myDiv"> 
    Content 
</div> 

ou

.myDivInvisible 
{ 
    visibility: hidden; 
} 
.myDivVisible 
{ 
    visibility: visible; 
} 

<div id="myDiv"> 
    Content 
</div> 

La différence est que display: none; PROVOQUERONT l'élément disparaisse de l'écran visible comme si elle est même pas là, alors que visibility: hidden; provoquera l'élément à disparaître de la vue, mais prend encore l'espace et d'autres éléments ne se déplacera pas dans l'espace vide comme ils le feraient display: none;.

Ensuite, vous pouvez échanger les styles en utilisant JavaScript:

if (radio button check goes here) 
{ 
    document.getElementById('myDiv').className = className; // display or visibility 
} 
else 
{ 
    document.getElementById('myDiv').className = className; // display or visibility 
} 

permuter Juste les classes de visibilité selon la méthode que vous préférez utiliser

Answer 2

Utilisez deux divs, les deux appartenant à une classe CSS qui inclut la règle display: none. Ensuite, lorsque l'utilisateur sélectionne un choix, remplacez ce CSS sur le div que vous voulez afficher et annuler le remplacement sur ce que vous ne voulez pas montrer. Par exemple, si l'utilisateur sélectionne le choix 1:

div1.style.display = 'block'; 
div2.style.display = ''; 

Answer 3

Il est préférable d'avoir 2 div et afficher celle qui doit être affiché. L'écriture dynamique du contenu le rend trop difficile à concevoir et n'apporte aucune valeur réelle.

Answer 4

Utilisez les 2 divs. L'intégration de HTML dans Javascript est moche et rend difficile la mise en page de votre page.

Answer 5

Utilisez les divs, puis utilisez display: none; pour diver pour masquer.