Показване/скриване на 'div' с помощта на JavaScript

За един уебсайт, който правя, искам да заредя един дивиди и да скрия друг, след което да имам два бутона, които ще превключват изгледите между дивидитата с помощта на JavaScript.

Това е настоящият ми код

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>

Втората функция, която замества div2, не работи, но първата работи.

Teocci
Редактиран въпрос Направете януари 2019 в 7:46
Програмиране
javascript html onclick
Направете януари 2014 в 1:12
10 изгледи
Решение

Как да покажете или скриете даден елемент:

За да покажете или скриете даден елемент, манипулирайте style property на елемента. В повечето случаи вероятно искате просто да промените свойството display на елемента':

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

Алтернативно, ако все пак искате елементът да заема място (например ако искате да скриете клетка от таблица), можете да промените вместо това свойството видимост на елемента:

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

Скриване на колекция от елементи:

Ако искате да скриете колекция от елементи, просто преминете итеративно през всеки елемент и променете display на 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>

Показване на колекция от елементи:

През повечето време вероятно ще превключвате между display: none и display: block, което означава, че следното може да е достатъчно при показване на колекция от елементи.

По желание можете да посочите желания display като втори аргумент, ако не искате по подразбиране да се използва 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" />

Алтернативно, по-добър подход за показване на елемента(ите) би бил просто да се премахне вградената стилизация display, за да се върне в първоначалното си състояние. След това проверете изчисления display стил на елемента, за да определите дали той е скрит от каскадно правило. Ако е така, покажете елемента.

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>

(Ако искате да отидете още по-далеч, можете дори да имитирате това, което прави jQuery, и да определите стила по подразбиране на браузъра, като добавите елемента към празен iframe (без конфликтна таблица със стилове) и след това извлечете изчисления стил. По този начин ще знаете истинската първоначална стойност на свойството display на елемента и няма да се налага да кодирате твърдо стойност, за да получите желаните резултати).

Превключване на дисплея:

По същия начин, ако желаете да превключите показването на елемент или колекция от елементи, можете просто да преминете през всеки елемент и да определите дали е видим, като проверите изчислената стойност на свойството показване. Ако е видим, задайте display на none, в противен случай премахнете вграденото стилизиране display, а ако все още е скрит, задайте display на посочената стойност или на твърдо зададената стойност по подразбиране, 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
Редактиран отговор Направете ноември 2015 в 6:49
Коментари (0)

Можете просто да манипулирате стила на въпросното div...

document.getElementById('target').style.display = 'none';
Коментари (1)

Използване на стил:


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

Използването на обработчик на събития в JavaScript е по-добро от атрибута onclick="" в 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 може да ви помогне да манипулирате DOM елементите лесно!

Peter Mortensen
Редактиран отговор Направете юли 2014 в 10:21
Коментари (1)