Показать / скрыть 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, не работает, но первая -.

Ответы:


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'));

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

В большинстве случаев вы, вероятно, будете просто переключаться между 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

В качестве альтернативы, лучший подход для показа элемента (-ов) состоит в простом удалении встроенного 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';
    }
  }
}

(Если вы хотите сделать еще один шаг вперед, вы можете даже подражать тому, что делает 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'));
});


97

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

Скрыть блок Div

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

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

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

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!


Вы можете попробовать 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
   }

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

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>


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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.