Heim > Web-Frontend > Front-End-Fragen und Antworten > So verstecken Sie div basierend auf der ID in jquery

So verstecken Sie div basierend auf der ID in jquery

WBOY
Freigeben: 2022-06-01 18:59:40
Original
3539 Leute haben es durchsucht

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()“.

So verstecken Sie div basierend auf der ID in jquery

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")
Nach dem Login kopieren

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)
Nach dem Login kopieren

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)
Nach dem Login kopieren

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>
Nach dem Login kopieren

Ausgabeergebnis:

So verstecken Sie div basierend auf der ID in jquery

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage