Mostrare/nascondere 'div' usando JavaScript

Per un sito web che sto facendo, voglio caricare un div e nasconderne un altro, poi avere due pulsanti che alternano le viste tra i div usando JavaScript.

Questo è il mio codice attuale

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>

La seconda funzione che sostituisce div2 non funziona, ma la prima sì.

Teocci
Domanda modificata 23º gennaio 2019 в 7:46
Programmazione
javascript html onclick
12º gennaio 2014 в 1:12
24 visualizzazioni
Soluzione

Come mostrare o nascondere un elemento:

Per mostrare o nascondere un elemento, manipola la proprietà di stile dell'elemento. Nella maggior parte dei casi, probabilmente vuoi solo cambiare la proprietà display dell'elemento:

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

In alternativa, se vuoi ancora che l'elemento occupi spazio (come se dovessi nascondere una cella della tabella), potresti invece cambiare la proprietà visibility dell'elemento:

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

Nascondere un insieme di elementi:

Se vuoi nascondere un insieme di elementi, basta iterare su ogni elemento e cambiare il display dell'elemento 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>

Mostra una collezione di elementi:

La maggior parte delle volte, probabilmente dovrai solo alternare tra display: none e display: block, il che significa che quanto segue può essere sufficiente quando si mostra un insieme di elementi.

Puoi opzionalmente specificare il display desiderato come secondo argomento se non vuoi che sia predefinito su block.

function show (elements, specifiedDisplay) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = specifiedDisplay || 'block';
  }
}

{\a6}}}}}}}Si tratta di un'operazione che non ha nulla a che fare con la creazione di una nuova pagina web;

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

In alternativa, un approccio migliore per mostrare l'elemento (o gli elementi) sarebbe semplicemente rimuovere lo stile display in linea per riportarlo al suo stato iniziale. Poi controllare lo stile display calcolato dell'elemento per determinare se è stato nascosto da una regola a cascata. Se è così, allora mostra l'elemento.

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>

(Se vuoi fare un passo avanti, potresti anche imitare ciò che fa jQuery e determinare lo stile predefinito del browser dell'elemento aggiungendo l'elemento ad un iframe vuoto (senza un foglio di stile in conflitto) e poi recuperare lo stile calcolato. Così facendo, conoscerete il vero valore iniziale della proprietà display dell'elemento e non dovrete hardcodeare un valore per ottenere i risultati desiderati).

Alterare la visualizzazione:

Allo stesso modo, se vuoi cambiare la "visualizzazione" di un elemento o di un insieme di elementi, puoi semplicemente iterare su ogni elemento e determinare se è visibile controllando il valore calcolato della proprietà "display". Se è visibile, imposta il display a none, altrimenti rimuovi lo stile display in linea, e se è ancora nascosto, imposta il display al valore specificato o al valore predefinito, 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
Risposta modificata 4º novembre 2015 в 6:49
Commentari (0)

Potete semplicemente manipolare lo stile del div in questione...

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

Usare lo stile:


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

Usare un gestore di eventi in JavaScript è meglio dell'attributo onclick="" 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 può aiutarti a manipolare facilmente gli elementi del DOM!

Peter Mortensen
Risposta modificata 12º luglio 2014 в 10:21
Commentari (1)