Vis/skjul 'div' ved hjælp af JavaScript

På et websted, jeg er ved at lave, vil jeg indlæse en div og skjule en anden div og derefter have to knapper, der skifter visning mellem div'erne ved hjælp af JavaScript.

Dette er min nuværende kode

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>

Den anden funktion, der erstatter div2, virker ikke, men det gør den første.

Teocci
Redigeret spørgsmål 2019ør januar 2019 в 7:46
Programmering
javascript html onclick
2014ør januar 2014 в 1:12
20 visninger
Løsning

Hvordan du viser eller skjuler et element:

For at vise eller skjule et element skal du manipulere elementets style property. I de fleste tilfælde vil du sandsynligvis bare ændre elementets display-egenskab:

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

Alternativt, hvis du stadig gerne vil have, at elementet skal fylde plads (f.eks. hvis du vil skjule en tabelcelle), kan du ændre elementets visibility-egenskab i stedet:

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

Hiding a collection of elements:

Hvis du ønsker at skjule en samling af elementer, skal du blot iterere over hvert element og ændre elementets display til 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'));

Visning af en samling af elementer:

Det meste af tiden vil du sandsynligvis bare skifte mellem display: none og display: block, hvilket betyder at følgende kan være tilstrækkeligt, når du viser en samling af elementer.

Du kan eventuelt angive den ønskede display som det andet argument, hvis du ikke ønsker, at den som standard skal være 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

Alternativt ville en bedre metode til at vise elementet/elementerne være blot at fjerne inline display-styling for at vende tilbage til den oprindelige tilstand. Derefter kontrolleres den beregnede display-stil for elementet for at afgøre, om det er skjult af en kaskaderegel. Hvis det er tilfældet, skal elementet vises.

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>

(Hvis du vil gå et skridt videre, kan du endda efterligne det, som jQuery gør, og bestemme elementets standard-browserstyling ved at tilføje elementet til en tom iframe (uden et modstridende stylesheet) og derefter hente den beregnede styling. På den måde kender du den sande oprindelige display-egenskabsværdi for elementet, og du behøver ikke at hardcode en værdi for at få de ønskede resultater).

Skift af visning:

Hvis du på samme måde ønsker at skifte display for et element eller en samling af elementer, kan du simpelthen iterere over hvert element og bestemme, om det er synligt ved at kontrollere den beregnede værdi af display-egenskaben. Hvis det er synligt, sættes display til none, ellers fjernes inline display-styling, og hvis det stadig er skjult, sættes display til den angivne værdi eller den hardcodede standardværdi, 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'));
});
Josh Crozier
Redigeret svar 2015ør november 2015 в 6:49
Kommentarer (0)

Du kan simpelthen ændre stilen på den pågældende div...

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

Brug af stil:


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

Det er bedre at bruge en eventhandler i JavaScript end attributten onclick=""" i 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 hjælpe dig med at manipulere DOM-elementer nemt!

Peter Mortensen
Redigeret svar 2014ør juli 2014 в 10:21
Kommentarer (1)