Dla strony internetowej, którą robię, chcę załadować jeden div i ukryć inny, a następnie mieć dwa przyciski, które będą przełączać widoki między div za pomocą JavaScript.
To jest mój obecny kod.
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>
Druga funkcja, która zastępuje div2 nie działa, ale pierwsza tak.
W celu pokazania lub ukrycia elementu należy manipulować elementem'właściwością style. W większości przypadków, prawdopodobnie chcesz po prostu zmienić element's właściwość display
:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
Alternatywnie, jeśli nadal chcesz, aby element zajmował miejsce (np. jeśli chcesz ukryć komórkę tabeli), możesz zmienić element'właściwość visibility
zamiast tego:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Jeśli chcesz ukryć kolekcję elementów, po prostu iteruj nad każdym elementem i zmień element's display
na 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>
Przez większość czasu, prawdopodobnie będziesz po prostu przełączał się pomiędzy display: none
i display: block
, co oznacza, że poniższe mogą być wystarczające podczas pokazywania kolekcji elementów.
Opcjonalnie możesz podać pożądany display
jako drugi argument, jeśli nie chcesz, aby domyślnie był to 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" />
Alternatywnie, lepszym podejściem do pokazywania elementu(ów) byłoby po prostu usunięcie stylizacji inline display
w celu przywrócenia go do stanu początkowego. Następnie należy sprawdzić obliczony styl display
elementu w celu określenia, czy jest on ukrywany przez regułę kaskadową. Jeśli tak, to pokaż element.
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>
(Jeśli chcesz pójść o krok dalej, możesz nawet naśladować to, co robi jQuery i określić element'domyślnej stylizacji przeglądarki przez dołączenie elementu do pustej iframe
(bez konfliktowego arkusza stylów), a następnie pobrać obliczoną stylizację. W ten sposób, będziesz znał prawdziwą początkową wartość właściwości display
elementu i nie będziesz musiał twardo kodować wartości, aby uzyskać pożądane rezultaty).
Podobnie, jeśli chciałbyś przełączyć display
elementu lub kolekcji elementów, mógłbyś po prostu iterować po każdym elemencie i określić, czy jest on widoczny poprzez sprawdzenie obliczonej wartości właściwości display
. Jeśli jest on widoczny, ustawiamy display
na none
, w przeciwnym razie usuwamy stylizację inline display
, a jeśli jest on nadal ukryty, ustawiamy display
na podaną wartość lub domyślną, 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>
Używanie stylu:
<style type="text/css">
.hidden {
display: none;
{
.visible {
display: block;
}
</style>
Użycie obsługi zdarzeń w JavaScript jest lepsze niż atrybut onclick=""
w 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 może pomóc Ci łatwo manipulować elementami DOM!