Comment masquer et afficher une balise dans jquery

青灯夜游
Libérer: 2022-04-29 11:52:06
original
3336 Les gens l'ont consulté

3 façons de mettre en œuvre : 1. Utilisez "$("a").toggle();"; 2. Utilisez "$("a").slideToggle();"; ).fadeToggle();". Ces trois méthodes vérifieront l'état visible de la balise a. Si elle est affichée, elle sera masquée. Si elle est masquée, elle sera affichée.

Comment masquer et afficher une balise dans jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

jquery peut utiliser les 3 méthodes intégrées suivantes pour masquer et afficher des éléments

  • méthode toggle()

  • méthode slideToggle()

  • méthode fadeToggle()

1 . Utilisez La méthode toggle()

la méthode toggle() bascule entre hide() et show() sur l'élément sélectionné.

Cette méthode vérifie l'état visible de l'élément sélectionné. Si un élément est masqué, exécutez show(), si un élément est visible, exécutez hide() - cela crée l'effet de basculer entre les états masqué et affiché.

<!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>
Copier après la connexion

Comment masquer et afficher une balise dans jquery

2. Utilisez la méthode slideToggle()

slideToggle() pour basculer entre slideUp() et slideDown() sur l'élément sélectionné.

Cette méthode vérifie l'état visible de l'élément sélectionné. Si un élément est masqué, slideDown() est exécuté, si un élément est visible, slideUp() est exécuté - cela crée l'effet de basculer entre les états masqué et affiché.

<!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>
Copier après la connexion

Comment masquer et afficher une balise dans jquery

3. Utilisez la méthode fadeToggle()

fadeToggle() pour basculer entre les méthodes fadeIn() et fadeOut().

  • Si les éléments disparaissent, fadeToggle() les affichera en utilisant l'effet de fondu entrant.

  • Si des éléments apparaissent en fondu, fadeToggle() les affichera en utilisant l'effet de fondu sortant.

<!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>
Copier après la connexion

Comment masquer et afficher une balise dans jquery

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!