Показать / скрыть div с помощью JavaScript

185

Для веб-сайта, которым я занимаюсь, я хочу загрузить один div и спрятать другой, а затем иметь две кнопки, которые будут переключать представления между div с помощью 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, не работает, но первая -.

javascript html onclick Джейк Олс
источник

430

Как показать или скрыть элемент:

Чтобы показать или скрыть элемент, манипулируйте свойством стиля элемента . В большинстве случаев вы, вероятно, просто хотите изменить displayсвойство элемента :

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

В качестве альтернативы, если вы все еще хотите, чтобы элемент занимал пространство (например, если бы вы скрывали ячейку таблицы), вы могли бы вместо этого изменить visibilityсвойство элемента :

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элемент или коллекцию элементов, вы можете просто выполнить итерацию по каждому элементу и определить, является ли он видимым, проверив вычисленное значение 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; }

<button id="toggle-button">Toggle display</button>

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

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

Развернуть фрагмент

Джош Крозье
источник

97

Вы также можете использовать jQuery JavaScript Framework:

Скрыть блок Div

$(".divIDClass").hide();

Показать блок Div

$(".divIDClass").show();

IMRUP
источник

17

Вопрос не

касается

53

что не является причиной для голосования. в этом вопросе конкретно не говорится, что не следует использовать jquery, и, помимо других людей, которые приходят сюда для просмотра ответов, они могут не иметь тех же ограничений, что и OP.

Кинджал Диксит

5

@KinjalDixit Если IMRUP хочет добавить примечание о том, что в его ответе не используется vanilla JS, а вместо этого используется jQuery, тогда это будет иметь некоторые преимущества, даже если исходный вопрос не помечен для jQuery / даже упоминает jQuery. В его нынешнем виде это ответ с использованием библиотеки без упоминания об этом, небольшое (хотя, вероятно, все, что необходимо) объяснение и запутанное использование селектора (с использованием селектора класса при указании идентификатора ?). В нынешнем виде я не думаю, что это полезный ответ на этот вопрос.

MLeFevre

3

При добавлении примера jQuery (который является совершенно верным подходом IMHO), пожалуйста, также предоставьте пример JS ванили для сравнения и объясните ОП различие. Так много новых разработчиков в наши дни думают, что jQuery - это JavaScript. Небольшое воспитание поможет им сделать правильный выбор.

Марк Купер

Я думаю, что этот ответ был очень полезен и связан с вопросом.

mfnx

44

Вы можете просто манипулировать стилем рассматриваемого div ...

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

Лео
источник

Но я бы хотел, чтобы в нем также отображалось содержание второго div

Джейк Олс,

20

Вы можете Скрыть / Показать Div, используя функцию Js. образец ниже

<script>
    function showDivAttid(){

        if(Your Condition) {

            document.getElementById("attid").style.display = 'inline';
        }
        else
        {
            document.getElementById("attid").style.display = 'none';
        }
    }

</script>

HTML -

<div  id="attid" style="display:none;">Show/Hide this text</div>

Рахул Савант
источник

если вы хотите использовать имя класса вместо Id, используйте подобно document.getElementsByClassName ('CLASSNAME') [0] .style.display = 'none';

Вишва

14

Используя стиль:

<style type="text/css">
   .hidden {
        display: none;
   {
   .visible {
        display: block;
   }
</style>

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

Ifch0o1
источник

Вы можете попробовать hiddenатрибут HTML5

bobobobo

12

Я нашел этот простой код JavaScript очень удобным!

#<script type="text/javascript">
    function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if ( e.style.display == 'block' )
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
</script>

мамтедж
источник

5

Установите свой HTML как

<div id="body" hidden="">
 <h1>Numbers</h1>
 </div>
 <div id="body1" hidden="hidden">
 Body 1
 </div>

А теперь установите JavaScript как

function changeDiv()
  {
  document.getElementById('body').hidden = "hidden"; // hide body div tag
  document.getElementById('body1').hidden = ""; // show body1 div tag
  document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; 
  // display text if JavaScript worked
   }

Andriya
источник

1

<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>

Агилар Джуниор
источник

Использование Hidden для такой проблемы, вероятно, не очень хорошая идея - так как постер не поддерживается в версиях IE до 11, постер эффективно пытается сделать что-то эквивалентное простому интерфейсу вкладок, и поэтому элементы не будут скрыты в все контексты. В такой ситуации, вероятно, лучше использовать «display» для управления сокрытием - см. Stackoverflow.com/questions/6708247/…

Джон - Not A Number

1

Просто установите атрибут стиля ID:

Показать скрытый div

<div id="xyz" style="display:none">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='block';  // to hide

Чтобы скрыть показанный div

<div id="xyz">
     ...............
</div>
//In JavaScript

document.getElementById('xyz').style.display ='none';  // to display

susan097
источник

0

И ответ Purescript для людей, использующих галоген:

import CSS (display, displayNone)
import Halogen.HTML as HH
import Halogen.HTML.CSS as CSS

render state = 
  HH.div [ CSS.style $ display displayNone ] [ HH.text "Hi there!" ]

Если вы «осмотрите элемент», вы увидите что-то вроде:

<div style="display: none">Hi there!</div>

но на вашем экране ничего не будет отображаться, как ожидалось.

Колин Вудбери
источник

0

Просто простая функция, необходимая для реализации Показать / скрыть 'div' с помощью JavaScript

<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display='none'; document.getElementById('states').style.display='block'; return false;">READ MORE</a>


<div id="states" style="display: block; line-height: 1.6em;">
 text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here  
    <a class="link-less" style="font-weight: bold;" onclick="document.getElementById('morelink').style.display='inline-block'; document.getElementById('states').style.display='none'; return false;">LESS INFORMATION</a>
    </div>

Ашар Зафар
источник

0

Я нашел этот вопрос, и недавно я реализовывал некоторые пользовательские интерфейсы, используя Vue.js, так что это может быть хорошей альтернативой.

Сначала ваш код не прячется, targetкогда вы нажимаете на Просмотр профиля. Вы переопределяете содержание targetс div2.

let multiple = new Vue({
  el: "#multiple",
  data: {
    items: [{
        id: 0,
        name: 'View Profile',
        desc: 'Show profile',
        show: false,
      },
      {
        id: 1,
        name: 'View Results',
        desc: 'Show results',
        show: false,
      },
    ],
    selected: '',
    shown: false,
  },
  methods: {
    showItem: function(item) {
      if (this.selected && this.selected.id === item.id) {
        item.show = item.show && this.shown ? false : !item.show;
      } else {
        item.show = (this.selected.show || !item.show) && this.shown ? true : !this.shown;
      }
      this.shown = item.show;
      this.selected = item;
    },
  },
});

<div id="multiple">
  <button type="button" v-for="item in items" v-on:click="showItem(item)">{{item.name}}</button>

  <div class="" v-if="shown">: {{selected.desc}}</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>

Развернуть фрагмент

Teocci
источник

0

Вы можете легко достичь этого с помощью jQuery .toggle () .

$("#btnDisplay").click(function() {
  $("#div1").toggle();
  $("#div2").toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  First Div
</div>
<div id="div2" style="display: none;">
  Second Div
</div>
<button id="btnDisplay">Display</button>

Чад
источник

Показать / скрыть div с помощью JavaScript

Ответы:

Как показать или скрыть элемент:

Сокрытие коллекции элементов:

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

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