使用JavaScript显示/隐藏'div'
对于我正在做的网站，我想加载一个div，然后隐藏另一个，然后有两个按钮可以使用JavaScript在div之间切换视图。
这是我当前的代码
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属性。在大多数情况下，您可能只想更改元素的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>
显示元素的集合：
在大多数情况下，您可能只会在display:none和之间切换display:block，这意味着在显示元素集合时，以下内容可能就足够了。
display如果您不希望将默认值指定为，则可以选择将所需的值指定为第二个参数block。
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元素或元素集合的，则可以简单地遍历每个元素并通过检查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>
-
对于我正在做的一个网站，我想加载一个div并隐藏另一个，然后有两个按钮可以使用JavaScript在div之间切换视图。 这是我当前的代码 null null 取代div2的第二个函数不起作用，但第一个是。
-
我有一个桌子，它的膨胀和折叠，但它变得太乱，无法使用它，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() 和
-
问题内容： 我有一个菜单和三个隐藏的div，这些div取决于用户选择的选项。我只想使用CSS来显示/隐藏它们。我现在正在使用jquery，但我希望禁用js即可访问它。此处有人为其他人提供了此代码，但仅在div：hover或div：active时有效，当我将其更改为div：visited时它不起作用。我是否需要添加某些内容，或者这不是正确的方法？感谢您的帮助:) 问题是我的客户希望菜单被选中时此di