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.
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
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>
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>3. Use the fadeToggle() method
The fadeToggle() method is between fadeIn() and switch between fadeOut() methods.
<!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>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!
![JavaScript basic syntax [dom|bom|es6 new syntax|jQuery|data visualization echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
