Interchange-Methode: 1. Verwenden Sie „element object.toggle()“, um das Element auszublenden, wenn das Element sichtbar ist, und zeigen Sie das Element an, wenn es unsichtbar ist. 2. Verwenden Sie „element object.slideToggle()“, um das Element auszublenden wenn das Element sichtbar ist. Verstecken Sie dann das Element und zeigen Sie das Element an, wenn es unsichtbar ist. 3. Verwenden Sie „element object.fadeToggle()“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.
jquery verfügt über drei Methoden zum Implementieren des Anzeige- und Ausblendungsaustauschs:
toggle()-Methode
slideToggle()-Methode
fadeToggle()-Methode
1.toggle() Methode
toggle()-Methode schaltet zwischen hide() und show() für das ausgewählte Element um.
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 (haben keinen Einfluss mehr auf das Layout der Seite).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换 hide() 和 show()</button>
</body>
</html>
2. slideToggle()-Methode
slideToggle()-Methode wechselt zwischen slideUp() und slideDown() für das ausgewählte Element.
Diese Methode prüft den Sichtbarkeitsstatus des ausgewählten Elements. Wenn ein Element ausgeblendet ist, wird slideDown() ausgeführt, und wenn ein Element sichtbar ist, wird slideUp() ausgeführt – dies erzeugt einen Umschalteffekt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换 slideUp() 和 slideDown()</button>
</body>
</html>
3. fadeToggle()-Methode
fadeToggle()-Methode wechselt zwischen den Methoden fadeIn() und fadeOut().
Wenn Elemente ausgeblendet sind, zeigt fadeToggle() sie mit dem Einblendeffekt an.
Wenn Elemente eingeblendet sind, zeigt fadeToggle() sie mit dem Ausblendeffekt an.
Hinweis: Ausgeblendete Elemente werden nicht vollständig angezeigt (haben keinen Einfluss mehr auf das Layout der Seite).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】
Das obige ist der detaillierte Inhalt vonSo realisieren Sie den Austausch von Anzeigen und Ausblenden in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
