对于我正在做的网站，我想加载一个 div，并隐藏另一个，然后有两个按钮可以使用 JavaScript 在 div 之间切换 View 。
这是我当前的代码
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>替换 div2 的第二个函数不起作用，但第一个函数起作用。
最佳答案
如何显示或隐藏元素:
要显示或隐藏元素，请操作元素的 style property .在大多数情况下，您可能只想更改元素的 display property :
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
或者，如果您仍然希望元素占用空间(例如隐藏表格单元格)，您可以更改元素的 visibility property而是:
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>显示元素集合:
大多数时候，您可能只是在 display: none 和 display: block 之间切换，这意味着以下可能显示元素集合时就足够了。
如果您不希望它默认为 block，您可以选择指定所需的 display 作为第二个参数。
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);
show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');
show(elements, 'inline-block'); // The second param allows you to specify a display value
show(document.getElementById('hidden-input'));
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>
<span>Inline span..</span>
<input id="hidden-input" />或者，显示元素的更好方法是仅删除内联 display 样式，以便将其恢复到初始状态。然后检查元素的计算 display 样式以确定它是否被级联规则隐藏。如果是，则显示该元素。
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
show(document.querySelectorAll('.target'));
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}<span class="target" style="display: none">Should revert back to being inline.</span>
<span class="target" style="display: none">Inline as well.</span>
<div class="target" style="display: none">Should revert back to being block level.</div>
<span class="target" style="display: none">Should revert back to being inline.</span>(如果你想更进一步，你甚至可以模仿 jQuery 所做的事情，并通过将元素附加到空白 iframe 来确定元素的默认浏览器样式(没有冲突的样式表)和然后检索计算的样式。这样做，您将知道元素的真正初始 display 属性值，并且您不必为了获得所需的结果而对值进行硬编码。)
切换显示:
同样，如果您想切换元素或元素集合的 显示，您可以简单地遍历每个元素并通过检查 的计算值来确定它是否可见>显示属性。如果可见，将 display 设置为 none，否则移除内联 display 样式，如果仍然隐藏，则设置 display 到指定的值或硬编码的默认值，block。
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}.target { display: none; }<button id="toggle-button">Toggle display</button>
<span class="target">Toggle the span.</span>
<div class="target">Toggle the div.</div>关于javascript - 使用 JavaScript 显示/隐藏 'div'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21070101/