Show/Hide Div onClick in JavaScript
-
Zeigen und verbergen Sie ein HTML
divmit CSS -
Zeigen und verbergen Sie ein HTML-
divmit deronclick()-Funktion und JavaScript
Dieser Artikel behandelt die Verwendung von CSS oder der Funktion onclick() zum Ein- und Ausblenden eines HTML-div in JavaScript.
Zeigen und verbergen Sie ein HTML div mit CSS
Ein div ist ein Tag und Element von HTML, um den Abschnitt oder die Unterteilungen einer Webseite zu definieren, und wir können auch beliebigen Inhalt in div-Tags einfügen. Ein div wird als Container von HTML-Elementen verwendet und kann mit CSS zugewiesen und mit JavaScript angepasst werden.
Wir können den Abschnitt div mit dem CSS-Schlüsselwort :target umschalten. Das Schlüsselwort :target ist mit einem HTML-Element verknüpft, das das Zielelement ist, und wir können seine Eigenschaften ändern, und die Eigenschaften werden darauf angewendet, wenn auf das Element geklickt wird.
Beispielsweise können wir beim Klicken auf einen Link ein bestimmtes div anzeigen. Betrachten wir ein Beispiel, bei dem wir drei div-Elemente haben und diese anzeigen möchten, wenn auf einen bestimmten Link geklickt wird.
Sehen Sie sich den Beispielcode und die Ausgabe unten an.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript div show hide</title>
<style>
#html-show-hide,
#css-show-hide,
#js-show-hide {
display: none;
}
#html-show-hide:target,
#css-show-hide:target,
#js-show-hide:target {
display: block;
}
</style>
</head>
<body>
<!--Nav-Bar-->
<a href="#html-show-hide">Show HTML</a>
<a href="#css-show-hide">Show CSS</a>
<a href="#js-show-hide">Show JS</a>
<!--HTML-->
<div class="html" id="html-show-hide">
<p class="text-html" id="htmlContent">HTML div..
</p>
</div>
<!--CSS-->
<div class="css" id="css-show-hide">
<p class="text-css" id="cssContent">CSS div..
</p>
</div>
<!--JS-->
<div class="js" id="js-show-hide">
<p class="text-js" id="jsContent">JS div..
</p>
</div>
</body>
</html>
Ausgang:
Im obigen Code haben wir die CSS-Eigenschaft display verwendet, um ein div-Element anzuzeigen und auszublenden. Wenn wir den Abschnitt div ausblenden wollen, müssen wir display auf none setzen und den Abschnitt anzeigen; wir müssen display auf block setzen.
Innerhalb des body-Tags haben wir 3 div-Elemente und 3 Links erstellt, die ein bestimmtes div anzeigen, wenn wir darauf klicken. Jedes div wird mit einem separaten Link unter Verwendung des href-Attributs angegriffen.
Wenn wir auf einen Link klicken, löst das Attribut href das CSS-Attribut target aus, das die Eigenschaft des Elements ändert, dessen Name an das Attribut target angehängt ist. Im obigen Code haben wir das style-Tag verwendet, um CSS in die HTML-Datei zu schreiben, aber wir können auch eine separate CSS-Datei erstellen und verlinken.
In der obigen Ausgabe sehen wir nur ein div, das ist das CSS div, weil wir auf den zweiten Link geklickt haben, und wenn wir auf einen anderen Link klicken, wird das derzeit sichtbare div ausgeblendet und das neue div wird auf der Seite sichtbar.
Zeigen und verbergen Sie ein HTML-div mit der onclick()-Funktion und JavaScript
Im obigen Beispiel haben wir das CSS-Attribut target verwendet, um die Reaktion auf einen Klick auszulösen, aber wir können auch die Funktion onclick() verwenden, die eine in der JavaScript-Datei oder im script HTML-Tag und der Code innerhalb der Funktion werden ausgeführt.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript div show hide</title>
</head>
<body>
<button onclick="showHide()">Show hide</button>
<div class="html" id="show-hide">
<p>HTML div..
</p>
</div>
<script>
const element = document.getElementById("show-hide");
function showHide() {
if (element.style.display === "none") {
element.style.display = "block"; // to show the element
} else {
element.style.display = "none"; // to hide the element
}
}
</script>
</body>
</html>
Ausgabe mit Show:
Ausgabe mit verstecken:
Im obigen HTML-Code haben wir einen div-Abschnitt mit der ID show-hide und eine Schaltfläche zum Aufrufen der showHide()-Funktion von JavaScript erstellt, die innerhalb des script-Tags vorhanden ist. In der Funktion showHide() erhalten wir das Element div mit der Funktion document.getElementById().
Zunächst haben wir mit der if-else-Anweisung die Sichtbarkeit des div mit dem style.display-Attribut überprüft, und wenn die display-Eigenschaft auf none gesetzt ist, müssen wir sie auf none setzen block, und wenn es auf block gesetzt ist, müssen wir es auf none setzen. In der obigen Ausgabe sehen wir eine Schaltfläche, die das angegebene div umschaltet.
Wenn das div ausgeblendet ist, wird es sichtbar, wenn wir die Taste drücken. Wenn das div sichtbar ist, wird es beim Drücken der Taste ausgeblendet.
Im obigen Code haben wir das script-Tag verwendet, um den JavaScript-Code in die HTML-Datei zu schreiben, aber wir können auch eine JavaScript-Datei erstellen und mit der HTML-Datei verknüpfen.
