'Div' mit JavaScript ein- / ausblenden

185

Für eine Website, die ich gerade mache, möchte ich ein Div laden und ein anderes ausblenden und dann zwei Schaltflächen haben, mit denen die Ansichten zwischen dem Div mithilfe von JavaScript umgeschaltet werden können.

Dies ist mein aktueller Code

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>

Erweitern Sie das Snippet

Die zweite Funktion, die div2 ersetzt, funktioniert nicht, die erste jedoch.

javascript html onclick Jake Ols
quelle

424

So zeigen Sie ein Element an oder verbergen es:

Um ein Element zu zeigen oder zu verbergen, manipulieren die Element - Stil - Eigenschaft . In den meisten Fällen möchten Sie wahrscheinlich nur die displayEigenschaft des Elements ändern :

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

Wenn Sie weiterhin möchten, dass das Element Speicherplatz belegt (z. B. wenn Sie eine Tabellenzelle ausblenden), können Sie stattdessen die visibilityEigenschaft des Elements ändern :

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

Eine Sammlung von Elementen ausblenden:

Wenn Sie eine Sammlung von Elementen ausblenden möchten, durchlaufen Sie einfach jedes Element und ändern Sie die Elemente displayin 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'));

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Eine Sammlung von Elementen anzeigen:

Die meiste Zeit werden Sie wahrscheinlich nur zwischen display: noneund wechseln display: block, was bedeutet, dass das Folgende möglich ist ausreichend sein , wenn eine Sammlung von Elementen .

Sie können optional das gewünschte displayals zweites Argument angeben, wenn Sie nicht möchten, dass es standardmäßig verwendet wird 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

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Alternativ wäre ein besserer Ansatz zum Anzeigen der Elemente, lediglich das Inline- displayStyling zu entfernen , um es wieder in seinen Ausgangszustand zu versetzen. Überprüfen Sie dann den berechneten displayStil des Elements, um festzustellen, ob es von einer kaskadierten Regel ausgeblendet wird. Wenn ja, zeigen Sie das Element.

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

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

(Wenn Sie noch einen Schritt weiter gehen möchten, können Sie sogar die Funktionsweise von jQuery nachahmen und das Standard-Browser-Styling des Elements bestimmen, indem Sie das Element an ein Leerzeichen anhängen iframe(ohne widersprüchliches Stylesheet) und dann das berechnete Styling abrufen wird die wahre Initiale kennendisplay Eigenschaftswert des Elements und Sie müssen keinen Wert fest codieren, um die gewünschten Ergebnisse zu erzielen.)

Anzeige umschalten:

Wenn Sie das displayElement oder eine Sammlung von Elementen umschalten möchten , können Sie einfach jedes Element durchlaufen und feststellen, ob es sichtbar ist, indem Sie den berechneten Wert der displayEigenschaft überprüfen . Wenn es sichtbar ist, setzen Sie das displayauf none, andernfalls entfernen Sie das Inline- displayStyling, und wenn es immer noch ausgeblendet ist, setzen Sie das displayauf den angegebenen Wert oder den fest codierten Standardwert 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'));
});

Code-Snippet anzeigen

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>

Erweitern Sie das Snippet

Josh Crozier
quelle

96

Sie können auch das jQuery- JavaScript-Framework verwenden:

Div Block verstecken

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

Div Block anzeigen

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

IMRUP
quelle

17

Die Frage erwähnt nicht die Verwendung von jQuery

MLeFevre

52

Das ist kein Grund für ein Downvoting. Die Frage besagt nicht ausdrücklich, dass jquery nicht verwendet werden soll, und neben anderen Personen, die hierher kommen, um die Antworten anzuzeigen, gelten möglicherweise nicht die gleichen Einschränkungen wie beim OP.

Kinjal Dixit

5

@KinjalDixit Wenn IMRUP eine Notiz hinzufügen möchte, dass seine Antwort kein Vanille-JS verwendet und stattdessen auf jQuery basiert, hätte dies einige Vorteile, obwohl die ursprüngliche Frage nicht für jQuery markiert ist oder sogar jQuery erwähnt. Aus heutiger Sicht handelt es sich um eine Antwort unter Verwendung einer Bibliothek, ohne zu erwähnen, dass dies der Fall ist, eine geringe (wenn auch wahrscheinlich alles Notwendige) Erklärung und eine verwirrende Verwendung eines Selektors (Verwendung des Klassenselektors unter Angabe der ID ?). Aus heutiger Sicht halte ich es nicht für eine nützliche Antwort auf diese Frage.

MLeFevre

3

Wenn Sie ein jQuery-Beispiel hinzufügen (was meiner Meinung nach ein absolut gültiger Ansatz ist), geben Sie zum Vergleich auch ein Vanilla-JS-Beispiel an und erläutern Sie dem OP den Unterschied. So viele neue Entwickler denken in diesen Tagen jQuery ist JavaScript. Ein wenig Bildung würde ihnen helfen, die richtigen Entscheidungen zu treffen.

Mark Cooper

Ich denke, diese Antwort war sehr nützlich und bezog sich auf die Frage.

Mfnx

44

Sie können einfach den Stil des betreffenden Div manipulieren ...

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

Löwe
quelle

Aber ich möchte, dass es auch den Inhalt der zweiten Division anzeigt

Jake Ols

20

Sie können Div mit der Js-Funktion ausblenden / anzeigen. Beispiel unten

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

Rahul Sawant
quelle

Wenn Sie den Klassennamen anstelle der ID verwenden

Vishwa

14

Stil verwenden:

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

Die Verwendung eines Ereignishandlers in JavaScript ist besser als das onclick=""Attribut in 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 kann Ihnen helfen, DOM-Elemente einfach zu manipulieren!

Ifch0o1
quelle

Sie können das hiddenAttribut von HTML5

Bobobobo

12

Ich fand diesen einfachen JavaScript-Code sehr praktisch!

#<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>

Mumtaj
quelle

5

Stellen Sie Ihren HTML-Code als ein

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

Und jetzt setzen Sie das Javascript als

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
quelle

1

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

Aguilar Junior
quelle

Die Verwendung von Hidden für ein Problem wie dieses ist wahrscheinlich keine gute Idee. Da das Poster in IE-Versionen vor 11 nicht unterstützt wird, versucht es effektiv, etwas zu tun, das einer einfachen Tab-Oberfläche entspricht, sodass die Elemente nicht ausgeblendet werden alle Kontexte. In einer solchen

John - Not A Number

1

Einfach Einfach Legen Sie das Stilattribut der ID fest:

Um das versteckte div zu zeigen

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

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

Um das gezeigte div zu verbergen

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

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

susan097
quelle

0

Und die Purescript-Antwort für Leute, die Halogen verwenden:

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!" ]

Wenn Sie "Element untersuchen", sehen Sie etwas wie:

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

Es wird jedoch erwartungsgemäß nichts auf Ihrem Bildschirm angezeigt.

Colin Woodbury
quelle

0

Nur einfache Funktion Sie müssen 'div' mit JavaScript ein- / ausblenden

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

Ashar Zafar
quelle

0

Ich habe diese Frage gefunden und kürzlich einige Benutzeroberflächen mit Vue.js implementiert, sodass dies eine gute Alternative sein kann.

Zuerst wird Ihr Code nicht ausgeblendet, targetwenn Sie auf Profil anzeigen klicken. Sie überschreiben den Inhalt targetmit 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>

Erweitern Sie das Snippet

Teocci
quelle

0

Sie können dies leicht mit jQuery .toggle () erreichen .

$("#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>

Tschad
quelle

'Div' mit JavaScript ein- / ausblenden

Antworten:

So zeigen Sie ein Element an oder verbergen es:

Eine Sammlung von Elementen ausblenden:

Eine Sammlung von Elementen anzeigen:

Anzeige umschalten: