Afficher / masquer 'div' en utilisant JavaScript

Pour un site Web que je fais, je veux charger un div, et cacher un autre, puis avoir deux boutons qui vont basculer les vues entre les div en utilisant JavaScript.

C'est mon code actuel

<script type="text/javascript"> function replaceContentInContainer(target, source) { document.getElementById(target).innerHTML = document.getElementById(source).innerHTML; } function replaceContentInOtherContainer(replace_target, source){ document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML; } </script> 

HTML actuel:

 <html> <button onClick="replaceContentInContainer('target', 'replace_target')">View Portfolio</button> <button onClick="replaceContentInOtherContainer('replace_target', 'target')">View Results</button> <div> <span id="target">div1</span> </div> <div style="display:none"> <span id="replace_target">div2</span> </div> 

La deuxième fonction qui remplace div2 ne fonctionne pas, mais la première est.

Comment afficher ou masquer un élément:

Pour afficher ou masquer un élément, manipulez la propriété de style de l'élément. Dans la plupart des cas, vous souhaitez probablement simplement modifier la propriété d' display l'élément:

 element.style.display = 'none'; // Hide element.style.display = 'block'; // Show element.style.display = 'inline'; // Show element.style.display = 'inline-block'; // Show 

Sinon, si vous souhaitez toujours que l'élément occupe de l'espace (comme si vous cachiez une cellule de table), vous pouvez changer la propriété de visibility l'élément à la place:

 element.style.visibility = 'hidden'; // Hide element.style.visibility = 'visible'; // Show 

Cacher une collection d'éléments:

Si vous souhaitez cacher une collection d'éléments, il suffit d'itérer sur chaque élément et de modifier l' display l'élément sur none :

 function hide (elements) { elements = elements.length ? elements : [elements]; for (var index = 0; index < elements.length; index++) { elements[index].style.display = 'none'; } } 
 // Usage: hide(document.querySelectorAll('.target')); hide(document.querySelector('.target')); hide(document.getElementById('target')); 
 hide(document.querySelectorAll('.target')); function hide (elements) { elements = elements.length ? elements : [elements]; for (var index = 0; index < elements.length; index++) { elements[index].style.display = 'none'; } } 
 <div class="target">This div will be hidden.</div> <span class="target">This span will be hidden as well.</span> 

Vous pouvez également utiliser le framework jQuery JavaScript:

Pour masquer le bloc Div

 $(".divIDClass").hide(); 

Pour montrer Div Block

 $(".divIDClass").show(); 

Vous pouvez simplement manipuler le style de la div en question …

 document.getElementById('target').style.display = 'none'; 

Utilisation du style:

 <style type="text/css"> .hidden { display: none; { .visible { display: block; } </style> 

L'utilisation d'un gestionnaire d'événements en JavaScript est supérieure à l'attribut onclick="" dans HTML:

 <button id="RenderPortfolio_Btn">View Portfolio</button> <button id="RenderResults_Btn">View Results</button> <div class="visible" id="portfolio"> <span>div1</span> </div> <div class"hidden" id="results"> <span>div2</span> </div> 

JavaScript:

 <script type="text/javascript"> var portfolioDiv = document.getElementById('portfolio'); var resultsDiv = document.getElementById('results'); var portfolioBtn = document.getElementById('RenderPortfolio_Btn'); var resultsBtn = document.getElementById('RenderResults_Btn'); portfolioBtn.onclick = function() { resultsDiv.setAttribute('class', 'hidden'); portfolioDiv.setAttribute('class', 'visible'); }; resultsBtn.onclick = function() { portfolioDiv.setAttribute('class', 'hidden'); resultsDiv.setAttribute('class', 'visible'); }; </script> 

JQuery peut vous aider à manipuler les éléments DOM facilement!

Vous pouvez Masquer / Afficher la division en utilisant la fonction Js. Échantillon ci-dessous

 <script> function showDivAttid(){ if(Your Condition) { document.getElementById("attid").style.display = 'inline'; } else { document.getElementById("attid").style.display = 'none'; } } </script> 

HTML –

 <div id="attid" style="display:none;">Show/Hide this text</div> 

J'ai trouvé ce code JavaScript simple très pratique!

 #<script type="text/javascript"> function toggle_visibility(id) { var e = document.getElementById(id); if ( e.style.display == 'block' ) e.style.display = 'none'; else e.style.display = 'block'; } </script> 

Définissez votre HTML comme

 <div id="body" hidden=""> <h1>Numbers</h1> </div> <div id="body1" hidden="hidden"> Body 1 </div> 

Et maintenant, définissez le javascript comme

 function changeDiv() { document.getElementById('body').hidden = "hidden"; // hide body div tag document.getElementById('body1').hidden = ""; // show body1 div tag document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked } 
 <script type="text/javascript"> function hide(){ document.getElementById('id').hidden = true; } function show(){ document.getElementById('id').hidden = false; } </script>