Toon/verberg 'div' met JavaScript

Voor een website die ik aan het maken ben, wil ik een div laden, en een andere verbergen, en dan twee knoppen hebben die van de ene div naar de andere gaan met behulp van JavaScript.

Dit is mijn huidige 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>

De tweede functie die div2 vervangt werkt niet, maar de eerste wel.

Teocci
Bewerkte vraag 23ste2 januari 2019 в 7:46
Programmering
javascript html onclick
12de6 januari 2014 в 1:12
23 views
Oplossing

Hoe toon of verberg je een element:

Om een element te tonen of te verbergen, manipuleer je de style eigenschap van het element's. In de meeste gevallen wil je waarschijnlijk alleen de display eigenschap van het element veranderen:

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Als alternatief, als je nog steeds wilt dat het element ruimte inneemt (zoals wanneer je een tabelcel wilt verbergen), zou je in plaats daarvan de visibility eigenschap van het element kunnen veranderen:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

Het verbergen van een verzameling elementen:

Als je een verzameling elementen wilt verbergen, itereer je gewoon over elk element en verander je het element's display in 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>

Het tonen van een verzameling elementen:

Meestal zul je waarschijnlijk gewoon schakelen tussen display: none en display: block, wat betekent dat het volgende misschien voldoende is bij het tonen van een verzameling elementen.

Je kunt optioneel de gewenste display als tweede argument opgeven als je niet wilt dat block de standaard is.

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" />

Een betere aanpak voor het tonen van het element zou zijn om de inline display styling te verwijderen om het element terug te brengen naar zijn oorspronkelijke staat. Controleer dan de berekende display stijl van het element om te bepalen of het verborgen wordt door een cascade regel. Zo ja, toon het element dan.

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>

(Als je nog een stap verder wilt gaan, kun je zelfs nabootsen wat jQuery doet en de standaard browser styling van het element bepalen door het element toe te voegen aan een leeg iframe (zonder een conflicterende stylesheet) en dan de berekende styling op te halen. Als je dat doet, weet je de echte initiële display property waarde van het element en hoef je geen waarde te hardcoden om het gewenste resultaat te krijgen).

Schakel de weergave:

Op dezelfde manier, als u de display van een element of verzameling elementen zou willen omwisselen, zou u eenvoudigweg over elk element kunnen itereren en bepalen of het zichtbaar is door de berekende waarde van de display eigenschap te controleren. Als het zichtbaar is, zet u de display op none, anders verwijdert u de inline display styling, en als het nog steeds verborgen is, zet u de display op de opgegeven waarde of op de hardcoded default, 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; }
Toggle display

<span class="target">Toggle the span.</span>

<div class="target">Toggle the div.</div>
Josh Crozier
Bewerkt antwoord 4de2 november 2015 в 6:49
Commentaren (0)

Je kunt gewoon de stijl van de div in kwestie manipuleren...

document.getElementById('target').style.display = 'none';
Commentaren (1)

Gebruik stijl:


   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }

Het gebruik van een event handler in JavaScript is beter dan het onclick="" attribuut in HTML:

View Portfolio
View Results

<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 kan u helpen om DOM-elementen gemakkelijk te manipuleren!

Peter Mortensen
Bewerkt antwoord 12de5 juli 2014 в 10:21
Commentaren (1)