suchen

Heim >Web-Frontend >js-Tutorial >So verstecken Sie div, ohne Platz in jquery zu beanspruchen

So verstecken Sie div, ohne Platz in jquery zu beanspruchen

青灯夜游
青灯夜游Original
2021-11-15 18:18:283459Durchsuche

So verwenden Sie JQuery, um Divs auszublenden, ohne Platz zu beanspruchen: 1. Verwenden Sie die Anweisung „$(“div“).css(‘display‘,‘none‘);“ .hide( );“-Anweisung; 3. Verwenden Sie die „$(“div“).toggle();“-Anweisung.

So verstecken Sie div, ohne Platz in jquery zu beanspruchen

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

jquery sorgt dafür, dass Divs ausgeblendet werden, ohne Platz zu beanspruchen.

Wenn Sie Divs ausblenden möchten, ohne Platz zu beanspruchen, sollten Sie darüber nachdenken, den Stil display:none für das Div festzulegen. display:none样式。

display:none可以不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样；不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。

那么如何使用jquery给div设置display:none

display:none kann das Element ausblenden, ohne Platz zu belegen, daher führt eine dynamische Änderung dieses Attributs zu einer Neuanordnung (Änderung des Seitenlayouts), was als Löschen des Elements von der Seite verstanden werden kann werden nicht an Nachkommen vererbt, aber ihre Nachkommen werden nicht angezeigt. Schließlich sind sie alle zusammen verborgen.

Wie kann man also mit jquery den display:none-Stil auf ein div festlegen? Lassen Sie mich es Ihnen unten vorstellen:

Methode 1: Verwenden Sie css(), um den display:none-Stil hinzuzufügen 

$("div").css('display','none');

Beispiel: So verstecken Sie div, ohne Platz in jquery zu beanspruchen

<!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() {
					$("div").css(&#39;display&#39;, &#39;none&#39;);
				});
			});
		</script>
	</head>
	<body>

		<div style="border: 1px solid red;">hello</div>
		<br>
		<button>点击按钮，让div不占位隐藏</button>

	</body>
</html>

Methode 2: Verwenden Sie die hide()-Methode 

$("div").hide();
So verstecken Sie div, ohne Platz in jquery zu beanspruchen hide() Die Methode kann Elemente ausblenden. Das Prinzip besteht darin, dem Element den Stil display:none hinzuzufügen. Methode 3: Verwenden Sie die Methode toggle() 

$("div").toggle();
toggle(()). Wenn ein Element ausgeblendet ist, führen Sie show() aus, um das Element auszublenden. Wenn ein Element sichtbar ist, führen Sie hide() aus, um das Element anzuzeigen. Dies führt zu einem Umschalteffekt

Empfohlene verwandte Tutorials: So verstecken Sie div, ohne Platz in jquery zu beanspruchenjQuery-Video-Tutorial

.

Das obige ist der detaillierte Inhalt vonSo verstecken Sie div, ohne Platz in jquery zu beanspruchen. 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
Vorheriger Artikel：So löschen Sie ein übergeordnetes Element basierend auf dem angegebenen Element in jqueryNächster Artikel：So löschen Sie ein übergeordnetes Element basierend auf dem angegebenen Element in jquery

In Verbindung stehende Artikel

Mehr sehen