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>Copier après la connexion
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>Copier après la connexion
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>Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
