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