search

Home >Web Front-end >Front-end Q&A >How to hide a div in jquery

How to hide a div in jquery

青灯夜游
青灯夜游Original
2022-02-28 15:01:468505browse

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>

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>

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to remove element attributes in jqueryNext article：How to remove element attributes in jquery

Related articles

See more