How to hide div elements in jquery's position-Front-end Q&A-php.cn

How to hide div elements in jquery's position

青灯夜游

Release： 2022-12-16 18:15:28

Original

2586 people have browsed it

In jquery, you can use the css() method to set the visibility or opacity style for the div element to occupy the position and hide the div element. Implementation steps: 1. Use the jquery selector to obtain the div element object, the syntax "$("selector")"; 2. Use css() to hide the div element, the syntax "element object.css("visibility","hidden") ;" or "ElementObject.css('opacity',0);".

How to hide div elements in jquery's position

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

In jquery, you can use the css() method to set the visibility or opacity style for the div element to occupy the position and hide the div element.

Method 1. Use css() to add visibility: hidden; style to the element, and set the invisible

visibility attribute to specify whether the element is visible.

visibility: hidden; style hides the corresponding element, but retains the original space in the document flow, and the resource will be loaded.

Example:

<!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>

Copy after login

How to hide div elements in jquerys position

Method 2: Use css() to add opacity:0; Style, set the transparency of the element to 0

The opacity attribute means to set the transparency of an element. It is not designed to change the bounding box of an element.

This means that setting opacity to 0 only visually hides the element. The element itself still occupies its own position and contributes to the layout of the web page. This is similar to visibility: hidden above.

Example:

<!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>

Copy after login

How to hide div elements in jquerys position

Extended knowledge: jquery’s built-in method of hiding elements

jquery is built-in Multiple ways to hide elements. Here are some commonly used ones:

show() and hide() methods

show() can display hidden

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

Copy after login

hide() can hide visible

elements:

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

Copy after login

This function is often used with show

toggle() method

toggle() method switches the visible state of an element.

If the selected elements are visible, then hide these elements. If the selected elements are hidden, then display these elements.

<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>

Copy after login

slideDown() method

Show hidden

elements in a sliding manner:

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

Copy after login

Related tutorials Recommended: jQuery video tutorial

The above is the detailed content of How to hide div elements in jquery's position. For more information, please follow other related articles on the PHP Chinese website!