Javascript: Wie man nur ein div auf Seitenladung zeigt

Ich habe zwei Div in einer HTML-Datei.Javascript: Wie man nur ein div auf Seitenladung zeigt

<div class="one" id="firstDiv"> 
</div> 

<div class="Two" id="SecondDiv"> 
</div>

Ich will nur div class zeigen = „Eins“, wenn die Seite geladen wird und schließlich div zwei zeigen, wenn ein Klick Aktion auftritt. Ich weiß, wie man onclick-Ereignis verblasst, aber wie kann ich das erste div nur anzeigen, wenn die Seite lädt?

Quelle

2017-04-30 Ola

Sie können class = "Two" -Anzeige machen: none und machen Sie es onclick wie bereits erwähnt –

Sie können das zweite div weglassen und es programmatisch auf Knopfdruck erstellen. Oder Sie können eine Klasse hinzufügen, die sie anfänglich ausblendet und sie bei Klick auf die Schaltfläche entfernen. – Brian

Mögliches Duplikat von [Zeige/verstecke 'div' mit JavaScript] (http://stackoverflow.com/questions/21070101/show-hide-div-using -javascript) –

erwartetes Ergebnis zu erzielen, unter Option
Option 1:
1.Erstellen Funktion, um die div mit id
2.Use Funktion auf Körper als onload Funktion
Codepen url für referenz https://codepen.io/nagasai/pen/JNNrpM

verstecken

Option 2:
1. machen #SecondDiv display: none zunächst
2. Und es Onclick mit Anzeige zur Verfügung stellen: Block
Codepen url für referenz https://codepen.io/nagasai/pen/KmmXez

JS:

var divTwo = document.getElementById('SecondDiv'); 
function hideDiv(){ 
    divTwo.style.display ='none'; 
} 

function showDiv(){ 
    divTwo.style.display ='block'; 
}

HTML:

<html> 
    <body onload="hideDiv()"> 
    <div class="one" id="firstDiv">111 
</div> 

<div class="Two" id="SecondDiv">222 
</div> 

    <button onclick="showDiv()">show Div Two</button> 
    </body> 
</html>

Option2:

HTML: 

<html> 
    <body> 
    <div class="one" id="firstDiv">111 
</div> 

<div class="Two" id="SecondDiv">222 
</div> 

    <button onclick="showDiv()">show Div Two</button> 
    </body> 
</html>

CSS:

.Two{ 
    display:none 
}

JS:

function showDiv(){ 
    var divTwo = document.getElementById('SecondDiv'); 
    divTwo.style.display ='block'; 
}

Quelle

2017-04-30 22:27:47

Sie können ein Click-Ereignis hinzufügen, so dass, wenn der Körper geklickt wird, können Sie die anderen div auf der Seite mit createElement() hinzu:

https://www.w3schools.com/jsref/met_document_createelement.asp

Wenn Sie nur die div hinzugefügt einmal werden möchten, können Sie kann den Ereignis-Listener zusammen mit der Erstellung des div entfernen.

Quelle

2017-04-30 22:25:32

Wenn Sie die div versteckt werden zu Beginn möchten Sie CSS verwenden könnte den verborgenen Wert wie anwenden:

<div class="hidden" id="someIdVal">Lorem Ipsum</div> 

.hidden{ 
    display: none; 
}

dann mit JS entfernen/hinzufügen Klasse mit:

function toggleHidden(id){ 
    document.getElementById(id).classList.toggle('hidden'); 
}

Quelle

2017-04-30 22:31:38 DanielC

.Zwei {display: none;}

Und dann mit Javascript onclick Ereignis:

document.getElementById ("SecondDiv"). Style.display = "Block";

Quelle

2017-04-30 22:34:13 user2633356

Javascript: Wie man nur ein div auf Seitenladung zeigt

Antwort

Verwandte Themen