对于我正在做的网站,我想加载一个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属性:
display
element.style.display = 'none'; // Hide element.style.display = 'block'; // Show element.style.display = 'inline'; // Show element.style.display = 'inline-block'; // Show
或者,如果您仍然希望元素占用空间(例如,如果您要隐藏表格单元格),则可以改为更改元素的visibility属性:
visibility
element.style.visibility = 'hidden'; // Hide element.style.visibility = 'visible'; // Show
如果要隐藏元素的集合,只需遍历每个元素并将元素的更改display为none:
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:none
display:block
display如果您不希望将默认值指定为,则可以选择将所需的值指定为第二个参数block。
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元素的真实初始属性值,并且您不必对值进行硬编码即可获得所需的结果。)
iframe
同样,如果您要切换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>