Heim  >  Artikel  >  Web-Frontend  >  So verbergen Sie div-Elemente an der Position von jquery

So verbergen Sie div-Elemente an der Position von jquery

青灯夜游
青灯夜游Original
2022-12-16 18:15:282525Durchsuche

In jquery können Sie die Methode css() verwenden, um den Sichtbarkeits- oder Deckkraftstil für das div-Element festzulegen, um die Position einzunehmen und das div-Element auszublenden. Implementierungsschritte: 1. Verwenden Sie den JQuery-Selektor, um das div-Elementobjekt abzurufen, die Syntax „$(“selector“)“ 2. Verwenden Sie css(), um das div-Element auszublenden, die Syntax „element object.css(“visibility“; ,"hidden") ;" oder "ElementObject.css('opacity',0);".

So verbergen Sie div-Elemente an der Position von jquery

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

In jquery können Sie die Methode css() verwenden, um den Sichtbarkeits- oder Deckkraftstil für das div-Element so festzulegen, dass es die Position einnimmt und das div-Element ausblendet.

Methode 1. Verwenden Sie css(), um dem Element den Stil visibility: versteckt; hinzuzufügen und legen Sie das unsichtbare Attribut visibility: hidden;样式,设置不可见

visibility 属性规定元素是否可见。

visibility: hidden;样式隐藏对应元素,但是在文档流中保留原来的空间,资源会加载。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$(".visibility").css("visibility","hidden");
				});
			});
		</script>
	</head>
	<body>
		<div>正常显示的div元素</div>
		<div class="visibility">需要隐藏的div元素</div>
		<div>正常显示的div元</div>
		<br>
		<button>占位置隐藏元素</button>

	</body>
</html>

So verbergen Sie div-Elemente an der Position von jquery

方法2:使用css()给元素添加opacity:0;样式,将元素的透明度设置为0

opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。

这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。这和上面的visibility: hidden

visibility fest, um anzugeben, ob das Element sichtbar ist.

visibility: versteckt; Der Stil verbirgt das entsprechende Element, behält jedoch den ursprünglichen Platz im Dokumentfluss bei und die Ressource wird geladen. So verbergen Sie div-Elemente an der Position von jquery

Beispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$(".opacity").css(&#39;opacity&#39;,0);
				});
			});
		</script>
	</head>
	<body>
		<div>正常显示的div元素</div>
		<div class="opacity">需要隐藏的div元素</div>
		<div>正常显示的div元</div>
		<br>
		<button>占位置隐藏元素</button>

	</body>
</html>
So verbergen Sie div-Elemente an der Position von jquery

Methode 2: Verwenden Sie css(), um dem Element den Stil opacity:0; hinzuzufügen und die Transparenz des Elements auf 0 zu setzen.
  • Das opacity-Attribut bedeutet, die Transparenz von festzulegen ein Element. Es ist nicht dazu gedacht, den Begrenzungsrahmen eines Elements zu ändern.

  • Das bedeutet, dass das Element nur optisch ausgeblendet wird, wenn die Deckkraft auf 0 gesetzt wird. Das Element selbst nimmt weiterhin seine eigene Position ein und trägt zum Layout der Webseite bei. Dies ähnelt visibility: versteckt oben.

Beispiel:

$(".btn2").click(function(){
  $("p").show();
});

    Erweitertes Wissen: Die in JQuery integrierte Methode zum Ausblenden von Elementen
  • Es gibt viele in JQuery integrierte Methoden zum Ausblenden von Elementen. Hier sind einige häufig verwendete Methoden:

show() und hide() Methoden

  • show() können versteckte

    -Elemente anzeigen.

    $(".btn1").click(function(){
      $("p").hide();
    });

    hide() kann sichtbare

    -Elemente ausblenden:

  • <html>
    <head>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".btn1").click(function(){
      $("p").toggle(1000);
      });
    });
    </script>
    </head>
    <body>
    <p>This is a paragraph.</p>
    <button class="btn1">Toggle</button>
    </body>
    </html>
Diese Funktion wird häufig mit der Methode show

toggle() verwendet. Die Methode

🎜🎜toggle() schaltet den sichtbaren Zustand des Elements um. 🎜🎜Wenn die ausgewählten Elemente sichtbar sind, dann blenden Sie diese Elemente aus. Wenn die ausgewählten Elemente ausgeblendet sind, dann zeigen Sie diese Elemente an. 🎜
$(".btn2").click(function(){
  $("p").slideDown();
});
🎜🎜🎜slideDown()-Methode🎜🎜🎜🎜Versteckte

-Elemente gleitend anzeigen: 🎜rrreee🎜Empfohlene Tutorials: 🎜jQuery-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonSo verbergen Sie div-Elemente an der Position von jquery. 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