使用JavaScript显示/隐藏“div”

对于我正在做的网站,我想加载一个div,并隐藏另一个,然后有两个button,将使用JavaScript切换div之间的意见。

这是我现在的代码

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

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

replacediv2的第二个函数不起作用,但是第一个是。

如何显示或隐藏元素:

为了显示或隐藏元素,请操作元素的样式属性 。 在大多数情况下,你可能只是想改变元素的display属性 :

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

或者,如果您仍然希望元素占据空间(就像隐藏表格单元格一样),则可以改变元素的visibility属性 :

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

隐藏一系列元素:

如果要隐藏元素的集合,只需遍历每个元素并将元素的display更改为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> 

你也可以使用jQuery JavaScript框架:

隐藏Div区块

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

显示Div Block

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

你可以简单地操纵有问题的div的风格…

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

使用风格:

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

在JavaScript中使用事件处理程序比HTML中的onclick=""属性更好:

 <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可以帮助您轻松操作DOM元素!

您可以使用Jsfunction隐藏/显示Div。 下面的示例

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

我发现这个普通的JavaScript代码非常方便!

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

将您的HTML设置为

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

现在设置为JavaScript

 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>