对于我正在做的一个网站，我想加载一个div并隐藏另一个，然后有两个按钮可以使用JavaScript在div之间切换视图。
这是我当前的代码
null
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;
}<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>null
取代div2的第二个函数不起作用，但第一个是。
要显示或隐藏元素，请操作元素的style属性。在大多数情况下，您可能只想更改元素的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'));
null
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>