search

Home >Web Front-end >Front-end Q&A >How to hide and show a tag in jquery

How to hide and show a tag in jquery

青灯夜游
青灯夜游Original
2022-04-29 11:51:533403browse

3 implementation methods: 1. Use "$("a").toggle();"; 2. Use "$("a").slideToggle();"; 3. Use "$ ("a").fadeToggle();". These three methods will check the visible status of the a tag. If it is displayed, it will be hidden. If it is hidden, it will be displayed.

How to hide and show a tag in jquery

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

jquery can use the following 3 built-in methods to hide and show elements

  • toggle() method

  • slideToggle() method

  • ##fadeToggle() method

1. Use toggle() method

The toggle() method switches between hide() and show() on the selected element.

This method checks the visible status of the selected element. If an element is hidden, run show(), if an element is visible, run hide() - this creates the effect of switching between hidden and shown states. 

<!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() {
					$("a").toggle();
				});
			});
		</script>
	</head>
	<body>

		<a href="#">a标签超链接</a><br><br>
		<button>隐藏和显示a标签</button>

	</body>
</html>

How to hide and show a tag in jquery

2. Use the slideToggle() method

slideToggle() method on the selected element Switch between slideUp() and slideDown().

This method checks the visible status of the selected element. If an element is hidden, slideDown() is run, if an element is visible, slideUp() is run - this creates the effect of switching between hidden and shown states. 

<!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() {
					$("a").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<a href="#">a标签超链接</a><br><br>
		<button>隐藏和显示a标签</button>

	</body>
</html>

How to hide and show a tag in jquery

3. Use the fadeToggle() method

The fadeToggle() method is between fadeIn() and switch between fadeOut() methods.

  • If the elements are faded out, fadeToggle() will use the fade in effect to display them.

  • If elements are faded in, fadeToggle() will display them using the fade out effect. 

    • <!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() {
					$("a").fadeToggle();
				});
			});
		</script>
	</head>
	<body>

		<a href="#">a标签超链接</a><br><br>
		<button>隐藏和显示a标签</button>

	</body>
</html>

How to hide and show a tag in jquery

[Recommended learning:

jQuery video tutorial, web front-end video】

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

jquery
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 add an element in jqueryNext article：How to add an element in jquery

Related articles

See more