web-dev-qa-db-de.com

'Div' mit JavaScript ein-/ausblenden

Für eine Website, die ich gerade mache, möchte ich ein div laden und ein anderes ausblenden. Dann habe ich zwei Schaltflächen, mit denen die Ansichten zwischen div mit 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>

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

157
Jake Ols

So zeigen oder verbergen Sie ein Element:

Um ein Element ein- oder auszublenden, bearbeiten Sie die style-Eigenschaft des Elements . In den meisten Fällen möchten Sie wahrscheinlich nur die display-Eigenschaft 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 möchten, dass das Element weiterhin Platz beansprucht (z. B. wenn Sie eine Tabellenzelle ausblenden), können Sie stattdessen die visibility-Eigenschaft 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, iterieren Sie einfach über jedes Element und ändern Sie display des Elements 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>

Eine Sammlung von Elementen anzeigen:

Meistens werden Sie wahrscheinlich nur zwischen display: none und display: block umschalten, was bedeutet, dass das folgende may ausreichend ist, wenn Sie eine Sammlung von Elementen anzeigen.

Sie können optional das gewünschte display als zweites Argument angeben, wenn Sie nicht möchten, dass block standardmäßig verwendet wird.

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

Alternativ wäre ein besserer Ansatz zum Anzeigen des Elements bzw. der Elemente das bloße Inline-_display-Styling, um es wieder in den Ausgangszustand zu versetzen. Überprüfen Sie anschließend den berechneten display-Stil des Elements, um festzustellen, ob es durch eine kaskadierte Regel verborgen wird. Wenn ja, dann 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';
    }
  }
}

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>

(Wenn Sie noch einen Schritt weiter gehen möchten, können Sie sogar nachahmen, was jQuery tut, und den standardmäßigen Browserstil des Elements bestimmen, indem Sie das Element an ein leeres iframe (ohne ein in Konflikt stehendes Stylesheet) anhängen und dann das berechnete Styling abrufen. Sie kennen den wahren Anfangswert der display-Eigenschaft des Elements, und Sie müssen keinen Wert festcodieren, um die gewünschten Ergebnisse zu erhalten.)

Anzeige umschalten:

Wenn Sie display eines Elements oder einer Elementkollektion umschalten möchten, können Sie einfach jedes Element durchlaufen und feststellen, ob es sichtbar ist, indem Sie den berechneten Wert der display-Eigenschaft überprüfen. Wenn es sichtbar ist, setzen Sie display auf none. Entfernen Sie andernfalls die Inline display-Form. Wenn es noch ausgeblendet ist, setzen Sie display auf den angegebenen Wert oder den fest vorgegebenen Wert 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>

359
Josh Crozier

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

Div-Block ausblenden

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

Div-Block anzeigen

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

Sie können den Stil des fraglichen div einfach ändern ...

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

Sie können mit der Js-Funktion Hide/Show Div anzeigen. Probe 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>
18
Rahul Sawant

Mit stil:

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

14
Ifch0o1

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

Legen Sie Ihren HTML-Code als fest

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

Und jetzt das Javascript einstellen 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
   }
4
Andriya
<script type="text/javascript">
    function hide(){
        document.getElementById('id').hidden = true;
    }
    function show(){
        document.getElementById('id').hidden = false;
    }
</script>
1
Aguilar Junior

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

Zunächst verbirgt Ihr Code nicht target, wenn Sie auf Profil anzeigen klicken. Sie überschreiben den Inhalt target mit 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
Teocci

Und die Purescript-Antwort für Menschen, 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 inspizieren" sehen Sie Folgendes:

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

wie erwartet wird jedoch auf Ihrem Bildschirm nichts angezeigt.

0
Colin Woodbury

Nur einfache Funktion Notwendigkeit, 'div' mithilfe von JavaScript einausblenden - /

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

Einfach Einfach Legen Sie das Stilattribut der ID fest:

Verborgenes div anzeigen

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

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

So blenden Sie das angezeigte div aus

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

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