Heim > Artikel > Web-Frontend > So verstecken Sie div basierend auf der ID in jquery
So verstecken Sie div basierend auf der ID in jquery
- WBOYOriginal
- 2022-06-01 18:59:403355Durchsuche
Methode: 1. Verwenden Sie den Selektor „#id“, um das Elementobjekt mit der angegebenen ID zu erhalten. Die Syntax lautet „$(“#spezifizierter ID-Wert“)“ 2. Verwenden Sie die Methode hide() oder toggle(); Methode zur Angabe der ID Das Elementobjekt kann ausgeblendet werden und die Syntax lautet „element object.hide()“ oder „element object.toggle()“.
Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.
So verbergen Sie div basierend auf der ID mit jquery
1. Verwenden Sie den ID-Selektor, um Elemente abzurufen.
#ID-Selektor wählt Elemente mit der angegebenen ID aus.
id bezieht sich auf das ID-Attribut eines HTML-Elements.
Hinweis: Das ID-Attribut muss innerhalb des Dokuments eindeutig sein.
Hinweis: Verwenden Sie keine ID-Attribute, die mit Zahlen beginnen! Dies kann in einigen Browsern zu Problemen führen.
Syntax
$("#id")2. Elemente ausblenden
hide()-Methode blendet das ausgewählte Element aus.
Tipp: Dies ähnelt der CSS-Eigenschaft display:none.
Syntax
$(selector).hide(speed,easing,callback)
toggle()-Methode verbirgt Elemente
Wechseln Sie zwischen hide() und show() für das ausgewählte Element.
Diese Methode prüft den Sichtbarkeitsstatus des ausgewählten Elements. Wenn ein Element ausgeblendet ist, wird show() ausgeführt, wenn ein Element sichtbar ist, wird hide() ausgeführt – dies erzeugt einen Toggle-Effekt.
Hinweis: Ausgeblendete Elemente werden nicht vollständig angezeigt (beeinflussen nicht mehr das Layout der Seite).
Tipps: Mit dieser Methode können Sie zwischen benutzerdefinierten Funktionen wechseln.
Grammatik
$(selector).toggle(speed,easing,callback)
Das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>132</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("#p1").hide();
});
$(".btn2").click(function(){
$("#p1").show();
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>Ausgabeergebnis:
Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo verstecken Sie div basierend auf der ID in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!