使用JavaScript显示/隐藏“div”
对于我正在做的一个网站，我想加载一个div并隐藏另一个，然后有两个按钮可以使用JavaScript在div之间切换视图。
这是我当前的代码
null
js lang-js prettyprint-override">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的第二个函数不起作用，但第一个是。
共有1个答案
要显示或隐藏元素，请操作元素的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>-
问题内容： 对于我正在做的网站，我想加载一个div，然后隐藏另一个，然后有两个按钮可以使用JavaScript在div之间切换视图。 这是我当前的代码 替换div2的第二个功能不起作用，但第一个功能起作用。 问题答案： 如何显示或隐藏元素： 为了显示或隐藏元素，请操纵元素的style属性。在大多数情况下，您可能只想更改元素的属性： 或者，如果您仍然希望元素占用空间（例如，如果您要隐藏表格单元格），
-
我有一个桌子，它的膨胀和折叠，但它变得太乱，无法使用它，IE和Firefox不能正常工作。 下面是JavaScript代码： 和示例HTML： 问题是，我对每一个都使用一个ID，这是非常烦人的，因为我想为每个父级和很多父级都有很多隐藏行，所以要处理的ID太多了。IE和FireFox只显示第一个隐藏行，而不显示其他行。我怀疑发生这种情况是因为我将所有ID触发在一起使其工作。我认为如果我使用类而不是I
-
问题内容： 按下后如何隐藏“编辑”链接？当我按下编辑键时，是否还可以隐藏“ lorem ipsum”文本？ 问题答案：
-
我尝试了下面的代码在移动和桌面上以不同的方式显示。但是两个句子同时显示。
-
主要内容：实例,jQuery hide() 和 show(),实例,实例,实例,jQuery toggle(),实例隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！ 因为时间是宝贵的，我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和
-
问题内容： 我一直在寻找一个很好的技巧，使隐藏/显示内容或仅具有CSS而没有javascript的列表。我已成功执行此操作： 并且它正在工作，但没有达到应有的效果。这是问题所在：显示内容时，您可以通过单击“页面上的任何位置”将其隐藏。如何禁用它？如何通过单击“隐藏”隐藏内容“仅”？先感谢您！ 问题答案： 我不会使用复选框，而是使用您已经拥有的代码 CSS HTML 这样，仅在单击hide元素时隐藏