jquery focus disparaît et se cache
Dans la conception Web, la disparition et le masquage du focus sont un effet courant. Nous pouvons facilement obtenir cet effet en écrivant du code à l'aide de jQuery. Dans cet article, nous présenterons comment utiliser jQuery pour obtenir l'effet de disparition du focus et fournirons un exemple de code.
Qu'est-ce que la disparition et le masquage du focus ?
Dans la conception Web, la disparition et le masquage du focus sont un effet courant. Lorsque nous saisissons des informations ou sélectionnons une option dans un contrôle interactif tel qu'une zone de saisie ou un onglet, certaines invites ou menus de fonctionnement apparaissent généralement. Lorsque nous quittons le contrôle et déplaçons le focus vers d’autres emplacements, ces invites ou menus de fonctionnement disparaissent automatiquement. Le but de cet effet est d'améliorer la clarté visuelle et la beauté de la page.
Comment utiliser jQuery pour faire disparaître et masquer le focus ?
Pour obtenir l'effet de disparition et de masquage du focus, nous pouvons utiliser jQuery pour écrire du code. Voici un exemple de code pour obtenir cet effet :
<!DOCTYPE html>
<html>
<head>
<title>jQuery 焦点消失隐藏示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#inputBox").focus(function(){
$("#tipBox").removeClass("hidden");
}).blur(function(){
$("#tipBox").addClass("hidden");
});
});
</script>
</body>
</html>Le code ci-dessus montre un exemple de zone de saisie et de zone d'invite. Lorsque l'utilisateur saisit des informations dans la zone de saisie, la zone d'invite affiche les informations correspondantes. Lorsque l'utilisateur quitte la zone de saisie, la zone d'invite disparaît automatiquement.
Dans le code, nous utilisons les méthodes de focus et de flou de jQuery. Lorsque la zone de saisie obtient le focus, nous utilisons la méthode removeClass pour supprimer la classe masquée de la zone d'invite afin qu'elle soit affichée sur la page. Lorsque l'utilisateur quitte la zone de saisie, nous utilisons la méthode addClass pour ajouter la classe masquée afin que la zone d'invite soit automatiquement masquée.
Nous définissons également une classe cachée et utilisons l'attribut display: none; pour que la boîte d'invite soit initialement masquée. De cette façon, lorsque l'utilisateur accède à la page pour la première fois, la boîte de dialogue sera masquée par défaut.
Autres exemples de codes
En plus de l'exemple de code ci-dessus, nous fournissons également d'autres exemples de codes de disparition et de masquage du focus pour votre référence :
Invite de tabulation
<!DOCTYPE html>
<html>
<head>
<title>选项卡提示</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.tip {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
padding: 5px;
}
.active {
display: block;
}
</style>
</head>
<body>
<ul>
<li class="tab active">选项卡1</li>
<li class="tab">选项卡2</li>
<li class="tab">选项卡3</li>
</ul>
<div class="tip active">选项卡1的提示信息</div>
<div class="tip">选项卡2的提示信息</div>
<div class="tip">选项卡3的提示信息</div>
<script>
$(document).ready(function(){
$(".tab").mouseover(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("hidden").addClass("active");
}).mouseout(function(){
var index = $(this).index();
$(".tip").eq(index).removeClass("active").addClass("hidden");
});
});
</script>
</body>
</html>Le code ci-dessus montre un exemple d'invite de tabulation. Lorsque l'utilisateur survole un onglet, l'info-bulle correspondante apparaît sur la page. Lorsque l'utilisateur déplace la souris hors de l'onglet, la boîte d'invite disparaît automatiquement.
Dans le code, nous utilisons les méthodes mouseover et mouseout de jQuery. Nous utilisons la méthode removeClass pour supprimer la classe cachée de l'info-bulle et ajouter la classe active pour la rendre visible sur la page lorsque la souris survole l'onglet. Lorsque la souris sort de l'onglet, nous utilisons la méthode removeClass pour supprimer la classe active et ajouter la classe masquée pour masquer automatiquement la boîte d'invite.
Zone de saisie et bouton
<!DOCTYPE html>
<html>
<head>
<title>输入框和按钮示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<input type="text" id="inputBox">
<button id="btn">提交</button>
<div id="tipBox" class="hidden">请输入内容</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var inputValue = $("#inputBox").val();
if(inputValue === ""){
$("#tipBox").removeClass("hidden");
}else{
$("#tipBox").addClass("hidden");
}
});
});
</script>
</body>
</html>Le code ci-dessus montre un exemple de zone de saisie et de bouton. Lorsque l'utilisateur clique sur le bouton Soumettre, si la zone de saisie est vide, une boîte de dialogue s'affichera sur la page. Sinon, la boîte de dialogue disparaîtra automatiquement.
Dans le code, nous utilisons la méthode click de jQuery. Lorsque l'utilisateur clique sur le bouton Soumettre, nous utilisons la méthode val pour obtenir le contenu de la zone de saisie et déterminer si elle est vide. Si elle est vide, nous utilisons la méthode removeClass pour supprimer la classe cachée de la boîte d'invite afin qu'elle puisse être affichée sur la page. Sinon, nous utilisons la méthode addClass pour ajouter la classe masquée afin que la boîte d'invite soit automatiquement masquée.
Conclusion
La disparition et le masquage du focus sont un effet courant dans la conception de sites Web. Nous pouvons facilement obtenir cet effet en écrivant du code à l'aide de jQuery. Dans cet article, nous présentons les connaissances sur la disparition du focus et fournissons quelques exemples de code. Si vous souhaitez obtenir l'effet de disparition et de masquage du focus, vous pouvez vous référer au code fourni dans cet article et apporter les modifications et ajustements correspondants.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Qu'est-ce que l'utilisation Effecte? Comment l'utilisez-vous pour effectuer des effets secondaires?
Mar 19, 2025 pm 03:58 PM
L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.
Expliquez le concept de chargement paresseux.
Mar 13, 2025 pm 07:47 PM
Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.
Comment fonctionne l'algorithme de réconciliation React?
Mar 18, 2025 pm 01:58 PM
L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159
Comment fonctionne le currying en JavaScript et quels sont ses avantages?
Mar 18, 2025 pm 01:45 PM
L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code
Quelles sont les fonctions d'ordre supérieur en JavaScript, et comment peuvent-ils être utilisés pour écrire du code plus concis et réutilisable?
Mar 18, 2025 pm 01:44 PM
Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.
Qu'est-ce que UseContext? Comment l'utilisez-vous pour partager l'état entre les composants?
Mar 19, 2025 pm 03:59 PM
L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.
Comment connectez-vous les composants React au magasin Redux à l'aide de Connect ()?
Mar 21, 2025 pm 06:23 PM
L'article discute de la connexion des composants React à Redux Store à l'aide de Connect (), expliquant MapStateToproprop, MapDispatchToprops et des impacts de performances.
Comment empêchez-vous le comportement par défaut dans les gestionnaires d'événements?
Mar 19, 2025 pm 04:10 PM
L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.
