Für eine Website, die ich tue, möchte ich ein Div laden und ein anderes ausblenden, dann zwei Schaltflächen haben, die die Ansichten zwischen den Div mit JavaScript umschalten.
Dies ist mein aktueller Code
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>
Die zweite Funktion, die div2 ersetzt, funktioniert nicht, aber die erste schon.
Um ein Element ein- oder auszublenden, manipulieren Sie die Stileigenschaft des Elements. In den meisten Fällen wollen Sie wahrscheinlich nur die Eigenschaft Anzeige
des Elements ändern:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
Wenn Sie jedoch möchten, dass das Element weiterhin Platz einnimmt (z. B. wenn Sie eine Tabellenzelle ausblenden möchten), können Sie stattdessen die Eigenschaft "Sichtbarkeit" des Elements ändern:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Wenn Sie eine Sammlung von Elementen ausblenden wollen, iterieren Sie einfach über jedes Element und ändern Sie display
des Elements auf 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>
Die meiste Zeit werden Sie wahrscheinlich nur zwischen display: none
und display: block
hin- und herschalten, was bedeutet, dass das Folgende möglicherweise ausreichend ist, wenn Sie eine Sammlung von Elementen anzeigen.
Sie können optional das gewünschte display
als zweites Argument angeben, wenn Sie nicht wollen, dass es standardmäßig auf block
eingestellt ist.
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" />
Alternativ wäre ein besserer Ansatz für die Anzeige des Elements/der Elemente, lediglich das Inline-Styling "display" zu entfernen, um es in seinen ursprünglichen Zustand zurückzusetzen. Dann prüft man den berechneten "display"-Stil des Elements, um festzustellen, ob es durch eine kaskadierte Regel verborgen wird. Wenn ja, wird das Element angezeigt.
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>
(Wenn Sie noch einen Schritt weiter gehen wollen, könnten Sie sogar nachahmen, was jQuery tut, und das Standard-Browser-Styling des Elements bestimmen, indem Sie das Element an einen leeren iframe
anhängen (ohne ein kollidierendes Stylesheet) und dann das berechnete Styling abrufen. Auf diese Weise kennen Sie den wahren Anfangswert der "Display"-Eigenschaft des Elements und müssen keinen Wert fest einprogrammieren, um die gewünschten Ergebnisse zu erzielen).
Wenn Sie die Anzeige eines Elements oder einer Sammlung von Elementen umschalten möchten, können Sie einfach über jedes Element iterieren und feststellen, ob es sichtbar ist, indem Sie den berechneten Wert der Eigenschaft "Anzeige" überprüfen. Wenn es sichtbar ist, setzen Sie display
auf none
, andernfalls entfernen Sie das Inline-Styling von display
, und wenn es immer noch versteckt ist, setzen Sie display
auf den angegebenen Wert oder den fest kodierten Standardwert 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>
Stil verwenden:
<style type="text/css">
.hidden {
display: none;
{
.visible {
display: block;
}
</style>
Die Verwendung eines Event-Handlers in JavaScript ist besser als das Attribut onclick=""
in HTML:
<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>
<div class="visible" id="portfolio">
<span>div1</span>
</div>
<div class"hidden" id="results">
<span>div2</span>
</div>
JavaScript:
<script type="text/javascript">
var portfolioDiv = document.getElementById('portfolio');
var resultsDiv = document.getElementById('results');
var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');
portfolioBtn.onclick = function() {
resultsDiv.setAttribute('class', 'hidden');
portfolioDiv.setAttribute('class', 'visible');
};
resultsBtn.onclick = function() {
portfolioDiv.setAttribute('class', 'hidden');
resultsDiv.setAttribute('class', 'visible');
};
</script>
jQuery kann Ihnen helfen, DOM-Elemente einfach zu manipulieren!