How to hide and show a tag in jquery-Front-end Q&A-php.cn

How to hide and show a tag in jquery

青灯夜游

Release： 2022-04-29 11:52:06

Original

3334 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

How to hide and show a tag in jquery

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!