How to hide a div in jquery-Front-end Q&A-php.cn

How to hide a div in jquery

青灯夜游

Release： 2022-02-28 15:01:46

Original

8489 people have browsed it

Jquery method to hide a div: 1. Use the "$("div").hide();" statement to hide; 2. Use the "$("div").toggle();" statement Hide; 3. Use the "$("div").css("display","none");" statement to hide.

How to hide a div in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery method to hide div

Method 1: Use hide() method

hide () method can hide selected elements.

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			  $("button").click(function(){
			  $("div").hide();
			  });
			});
		</script>
	</head>

	<body>
		<h1>这是一个标题</h1>
		<div style="font-size:120%;color:red">这是一个div元素。</div>
		<p>这是另一个段落。</p>
		<button>删除div元素</button>
	</body>
</html>

Copy after login

How to hide a div in jquery

Method 2: Use the toggle() method

toggle() method to switch the visible state of the element.

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

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			  $("button").click(function(){
			  $("div").toggle();
			  });
			});
		</script>
	</head>

	<body>
		<h1>这是一个标题</h1>
		<div style="font-size:120%;color:red">这是一个div元素。</div>
		<p>这是另一个段落。</p>
		<button>隐藏或显示div元素</button>
	</body>
</html>

Copy after login

How to hide a div in jquery

Method 3: Use the CSS() method to set the display attribute to the element

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			  $("button").click(function(){
			  $("div").css("display","none");//隐藏div
			  });
			});
		</script>
	</head>

	<body>
		<h1>这是一个标题</h1>
		<div style="font-size:120%;color:red">这是一个div元素。</div>
		<p>这是另一个段落。</p>
		<button>隐藏div元素</button>
	</body>
</html>

Copy after login

How to hide a div in jquery

[Recommended learning: jQuery video tutorial, web front-end video】

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