So zeigen Sie versteckte Divs in JavaScript an: Erstellen Sie zunächst eine neue Datei und eine Schaltfläche. Erstellen Sie dann ein verstecktes Div und legen Sie einen versteckten Stil für die Schaltfläche fest.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, DELL G3-Computer.
So blenden Sie Divs in Javascript ein und aus:
1. Öffnen Sie die HTML-Entwicklungssoftware und erstellen Sie eine neue HTML-Datei. Wie im Bild gezeigt:
2. Erstellen Sie eine Schaltfläche in der HTML-Datei und legen Sie dann eine ID für die Schaltfläche fest. Wie im Bild gezeigt:
Code:
<input type="button" id="show" value="显示隐藏div" />
3 Erstellen Sie dann ein verstecktes Div, schreiben Sie den Inhalt, der in dieses Div ausgeblendet werden muss, legen Sie dann eine ID für dieses Div fest und legen Sie die Fall-ID fest im Koffer verstecken. Wie im Bild gezeigt:
Code:
<div id="hide">我是隐藏的div</div>
4. Legen Sie einen versteckten Stil für das Div fest. Stellen Sie nach dem
-Tag den Stil display:none für die ID auf hide ein, sodass das Div mit der ID auf hide ausgeblendet wird. Wie im Bild gezeigt: <p>Stilcode: </p><pre class="brush:php;toolbar:false"><style>
#hide{display: none;padding-top: 15px;}
</style></pre><p><img src="https://img.php.cn/upload/image/718/309/380/1617853544958635.png" title="1617853544958635.png" alt="So zeigen und verbergen Sie div in Javascript"></p>
<p>5 Fügen Sie ein Click-Hide-Ereignis für die Schaltfläche hinzu. Nachdem Sie auf die Schaltfläche geklickt haben, ändern Sie die Anzeige des ausgeblendeten Divs in Block, sodass das Div nach dem Klicken angezeigt wird. Wie im Bild gezeigt: </p>
<p>Ereigniscode: </p><pre class="brush:php;toolbar:false"><script type="text/javascript">
window.onload = function(){
document.getElementById("show").onclick = function(){
document.getElementById("hide").style.display = "block";
}
}
</script></pre><p><strong><img src="https://img.php.cn/upload/image/886/167/729/1617853555861705.png" title="1617853555861705.png" alt="So zeigen und verbergen Sie div in Javascript"></strong></p>
<blockquote><p><strong>Zugehörige kostenlose Lernempfehlungen: </strong><a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript视频教程"><strong>Javascript-Video-Tutorial</strong></a></p></blockquote>
Das obige ist der detaillierte Inhalt vonSo zeigen und verbergen Sie div in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
